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

需求：

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

以上暂完成的第一个需求，第二个需求完成，后面会继续补充的