components.jsx 4.9 KB
Newer Older
徐立's avatar
徐立 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
import React, { Component } from 'react'
import styles from './styles.less'
const AMap = window.AMap
const AMapUI = window.AMapUI
//思路进入页面时先定位
//可以通过搜索选址
//可以通过拖拽微调选址
class GetLocation extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectionCenter: []
    }
  }
  componentWillMount() {}
  componentDidMount = () => { 
    this.getLocation()
    this.searchSiteSelection()
  }
  // 12,[116.171731,40.06682]
  //获取当前定位
  getLocation = () => {
    /***************************************
          由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。
         ***************************************/
    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) => {
      //   console.log(result)
      //       })
      AMap.event.addListener(geolocation, 'complete', onComplete.bind(this)) //返回定位信息
      AMap.event.addListener(geolocation, 'error', onError) //返回定位出错信息
    })
    //解析定位结果
    function onComplete(data) {
      let poi = data.position.toString().split(',')
      // 需要通过改变this指向
      this.dragSiteSelection(15, poi)
    }
    //解析定位错误信息
    function onError(data) {
      var str = '定位失败,';
        str += '错误信息:'
        switch(data.info) {
            case 'PERMISSION_DENIED':
                str += '浏览器阻止了定位操作';
                break;
            case 'POSITION_UNAVAILBLE':
                str += '无法获得当前位置';
                break;
            case 'TIMEOUT':
                str += '定位超时';
                break;
            default:
                str += '未知错误';
                break;

        }
        console.log(str)
    }
    
  }
  //通过搜索来获取定位信息
  searchSiteSelection = () => {
    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) => {
    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 (
      <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