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