react中使用高德地图进行定位

时间:2024-04-04 07:35:55

需求:

1)点击【搜索地图】后,会根据填写的内容进行搜索,地图定位中显示搜索结果并跳转到对应区域
2)地图定位中可任意点选位置,并将该位置的经纬度保存到该门店中

结果:

只实现了第一条的需求

完成条件

环境:

使用react.js Ant.design的框架

步骤:

1)注册成为高德地图的开发者,申请key
2)在项目中安装 react-amap
3)导包 import { Map, Marker } from ‘react-amap’;(Marker是显示的图标)
4)代码

<Map amapkey={'申请的key'} zoom={6}  plugins={['ToolBar']}>
      <Marker position={{longitude:this.state.longitude, latitude: this.state.latitude}} />
</Map>


//搜索的过程中使用高德地图地理编码将地址转化成经纬度,如果要实现第二个需求,需要使用逆地理编码从地图上获取经纬度在转化成地址
onSearchAddress = () =>{
    var address = this.mRegion;
    fetch('https://restapi.amap.com/v3/geocode/geo?key=你申请的key'&address='+address)
      .then(res=>{
        if (res.ok) {
          res.json().then(data =>{
            this.setState({dict: data});
            var list = this.state.dict.geocodes;
            var geocodes = list[0]['location'].split(',');
            this.mLng = parseFloat(geocodes[0]); //经度
            this.mLat = parseFloat(geocodes[1]); //维度
            this.setState({
              longitude:this.mLng,
              latitude:this.mLat,
            })
          })
        }
      });
    this.setState({})
  };
  怎么写可以参考开发者地址:https://lbs.amap.com/api/webservice/guide/api/georegeo
  

搜索返回的参数,我主要是用到了location

react中使用高德地图进行定位
以上暂完成的第一个需求,第二个需求完成,后面会继续补充的