react 高德地图

React Map 地址:
https://elemefe.github.io/react-amap/articles/high

安装
npm install react-amap --save
npm instal react-amap-plugin-geolocation --save

js定义
import { Map } from 'react-amap'
import Geolocation from 'react-amap-plugin-geolocation'

const pluginProps = {
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 100, //超过10秒后停止定位,默认:无穷大
maximumAge: 0, //定位结果缓存0毫秒,默认:0
convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: true, //显示定位按钮,默认:true
buttonPosition: 'RB', //定位按钮停靠位置,默认:'LB',左下角
showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy:true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:f
extensions:'all'
}

<div style={{width:width,height:"100px"}}>
<Map >
<Geolocation
ref={(locat)=>this.mapLocation = locat}
{...pluginProps} />
</Map>
</div>
注释:Map必须外加一个div(宽高是必须给的),否则无法显示。

获取地址详细信息
onClick={()=>{
this.mapLocation.geolocation.getCurrentPosition((status,getData)=>{
this.setState({
flag:true,
AddressList:getData['pois']
});
})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容