需求:
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
以上暂完成的第一个需求,第二个需求完成,后面会继续补充的