components.jsx

//@ts-nocheck
import React, { Component } from 'react';
import styles from './styles.less';
import { message, Icon } from 'antd';
//思路进入页面时先定位
//可以通过搜索选址
//可以通过拖拽微调选址
class GetLocation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectionCenter: [],
    };

  }

  componentWillMount() {

  }

  componentDidMount = () => {
    if(!window.AMapJS){
      console.log('请加载高德地图定位组件');
      return false;
    }
    this.loader = new window.AMapJS.AMapLoader({
      key: 'a8d312e3cc24b4fd12bad99780c2182a', // 公司账号配置的应用的key
      // https://console.amap.com/dev/key/app
      version: '1.4.8',
      plugins: ['AMap.Geolocation'],
      security: {
        securityJsCode: 'f4a5344f0117dc8b32ee216d2311fc1a', // 公司账号配置的应用的 安全key
      },
    });
    this.loader.load()
      .then(() => {
        // 加载完成
        console.log('Amap地图加载完成');
        this.getLocation();
        if (this.props.showMap) {
          this.searchSiteSelection();
        }
      })
      .catch(e => {
        console.log('-------88--99--11--12');
        console.log(e);
        message.error('未配置地图厂家');
        return;
      });

  };
  // 12,[116.171731,40.06682]
  //获取当前定位
  getLocation = () => {
    /***************************************
     由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
     ***************************************/
    const AMap = window.AMap;
    let map,
      geolocation;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
      resizeEnable: true,
    });
    map.plugin('AMap.Geolocation', () => {
      geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        timeout: 1000000, //超过10秒后停止定位，默认：无穷大
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        buttonPosition: 'RB',
        GeoLocationFirst: true,
      });

      map.addControl(geolocation);
      geolocation.getCurrentPosition();
      // /**
      //  * 只查询到城市
      //  */
      // geolocation.getCityInfo((status, result) => {
      //       })
      AMap.event.addListener(geolocation, 'complete', onComplete.bind(this)); //返回定位信息
      AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
    });

    //解析定位结果
    function onComplete(data) {
      console.log(data);
      if (!this.props.showMap) {
        let locationMsg = {
          lng: data.position.lng, // 经度
          lat: data.position.lat, // 维度
          address: data.formattedAddress, // 详细地址
          addressComponent: data.addressComponent,
          // nearestJunction: positionResult.nearestJunction, // 最近的路口
          // nearestRoad: positionResult.nearestRoad, // 最近的路
          // nearestPOI: positionResult.nearestPOI, // 最近的POI
        };
        this.props.getLocationMsg(locationMsg);
      } else {
        let poi = data.position.toString()
          .split(',');
        // 需要通过改变this指向
        this.dragSiteSelection(15, poi);
      }

    }

    //解析定位错误信息
    function onError(data) {
      console.log('error', data);
      var str = '定位失败,';
      str += '错误信息：';
      switch (data.info) {
        case 'PERMISSION_DENIED':
          str += '浏览器阻止了定位操作';
          break;
        case 'POSITION_UNAVAILBLE':
          str += '无法获得当前位置';
          break;
        case 'TIMEOUT':
          str += '定位超时';
          break;
        default:
          str += '未知错误';
          break;
      }
      alert(
        '定位失败,请在设置==》应用==》权限管理==》位置信息权限==>打开应用定位权限',
      );
    }
  };
  //通过搜索来获取定位信息
  searchSiteSelection = () => {
    const AMapUI = window.AMapUI;
    if (!AMapUI) {
      return false;
    }
    AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker) => {
      let poiPicker = new PoiPicker({
        input: 'pickerInput',
      });
      //初始化poiPicker
      window.poiPicker = poiPicker;
      //选取了某个POI
      poiPicker.on('poiPicked', (poiResult) => {
        let poi = poiResult.item.location.toString()
          .split(',');
        this.dragSiteSelection(15, poi);
      });
    });
  };

  //拖拽位置选择
  dragSiteSelection = (zoom, center) => {
    const AMapUI = window.AMapUI;
    if (!AMapUI) {
      return false;
    }
    AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
      let map = new AMap.Map('map', {
        zoom: zoom,
        resizeEnable: true,
        center: center,
      });
      let positionPicker = new PositionPicker({
        mode: 'dragMap', //设定为拖拽地图模式，可选'dragMap[拖拽地图]'、'dragMarker[拖拽点]'，默认为'dragMap'
        map: map,
        // iconStyle: { //自定义图标外观
        //     url: '//webapi.amap.com/ui/1.0/assets/position-picker2.png', //图片地址
        //     ancher: [24, 40], //要显示的点大小，将缩放图片
        //     size: [48, 48]    //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
        // }
      });
      positionPicker.on('success', (positionResult) => {
        let locationMsg = {
          lng: positionResult.position.lng, // 经度
          lat: positionResult.position.lat, // 维度
          address: positionResult.address, // 详细地址
          nearestJunction: positionResult.nearestJunction, // 最近的路口
          nearestRoad: positionResult.nearestRoad, // 最近的路
          nearestPOI: positionResult.nearestPOI, // 最近的POI
        };
        //将数据抛出
        this.props.getLocationMsg(locationMsg);
      });
      positionPicker.on('fail', (positionResult) => {
        // 海上或海外无法获得地址信息
        alert('选址失败请稍后重试');
      });
      positionPicker.start();
    });
  };

  render() {
    return (
      <>
        <a onClick={this.getLocation}><Icon type="compass" /></a>
        <div
          id='GetLocation'
          style={{ display: this.props.showMap ? 'block' : 'none' }}>
          <input
            id='pickerInput'
            className={styles.top}
            placeholder='输入关键字选取地点'
          />
          <div id='map' className={styles.map}></div>
        </div>
      </>
    );
  }
}

export default GetLocation;