react + ant design 项目中使用高德地图
第一步:在head标签中引入高德地图api和key<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=bca3c8db7e16261dadc9b149bb686e71"></script>第二步:定义地图容器id<div id="add-instituti...
·
第一步:在head标签中引入高德地图api和key
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=bca3c8db7e16261dadc9b149bb686e71"></script>
第二步:定义地图容器id
<div id="add-institution-container" name="container" tabIndex="0"/>
// 机构地址相关
const provinceOptions = provinceList.map(item => <Option key={item.name}>{item.name}</Option>);
const cityOptions = cityList.map(item => <Option key={item.name}>{item.name}</Option>);
const districtOptions = districtList.map(item => <Option key={item.name}>{item.name}</Option>);
const streetOptions = streetList.map(item => <Option key={item.name}>{item.name}</Option>);
const addressChange = (value) => {
if (!value) {
return
}
let keyword = "";
keyword = keyword + area.province + area.city + area.district + area.street;
keyword = keyword + value;
// 清除已有标记点
mapObj.remove(markers);
mapObj.plugin('AMap.Geocoder', function () {
const geocoder = new window.AMap.Geocoder({});
const marker = new window.AMap.Marker({
map: mapObj,
bubble: true
});
geocoder.getLocation(keyword, (status_, result_) => {
if (status_ === 'complete' && result_.info === 'OK') {
geocoder.getAddress([result_.geocodes[0].location.lng, result_.geocodes[0].location.lat], (status, result) => {
if (status === 'complete' && result.info === 'OK') {
// 经纬度写入
setXY({x: result_.geocodes[0].location.lng, y: result_.geocodes[0].location.lat});
console.log(result_.geocodes[0].location);
// 生成当前标记点
marker.setPosition(result_.geocodes[0].location);
mapObj.setCenter(marker.getPosition());
setMarkers(marker);
// address字段(定位点地址)写入
setFormattedAddress(area.street ? keyword : result.regeocode.addressComponent.province + result.regeocode.addressComponent.city + result.regeocode.addressComponent.district + result.regeocode.addressComponent.township + keyword);
// 其他地址信息写入
setArea(5, result.regeocode.addressComponent);
}
});
}
});
});
};
更多推荐
所有评论(0)