最近在项目中遇到这样一个需求,在新增商品的模态框中,根据拿到的地址在地图上显示具体位置,并把经纬度给后台。
如图,选择供应商之后在2的input框中会显示详细的地址,根据后台返回的详细地址地图上定位到具体的经纬度,并且拿到经纬度。
做这个需求之前先去百度地图获取密钥,在index.html中引入百度地图api
<!--引入百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>//内网测试
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1"></script> -->//项目上线到域名地址要改为https,并且要加&s=1
这是引入百度api的写法,下面那个是外网的,项目上线到外网的话要加https,并且在密钥后面拼接&s=1
1、首先定义显示的标签容器
<!--地图容器-->
<div>
<div id="allmap"></div>
</div>
2、我是在弹框显示的时候先初始化一个地图,手动设置一个经纬度
cellMap(){
var th = this;
// 创建Map实例
var map = new BMap.Map("allmap");
// 初始化地图,设置中心点坐标,
var point = new BMap.Point(113.929872,22.581627); // 初始化点坐标
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom();
},
然后选择供应商之后在供应商选择框的change事件中去回调显示的函数
getMap(address){
// debugger
let that = this;
var map = new BMap.Map("allmap");
var localSearch = new BMap.LocalSearch(map);
map.clearOverlays();//清空原来的标注
var keyword = this.managementAddress;
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
console.log(poi.point.lng);
console.log(poi.point.lat);
map.centerAndZoom(poi.point, 13);
var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注
map.addOverlay(marker);
that.lng = poi.point.lng;
that.lat = poi.point.lat;
});
localSearch.search(keyword);
},
个人写法,仅供参考