最近在项目中遇到这样一个需求vps云服务器，在新增商品的模态框中，根据拿到的地址在地图上显示具体位置，并把经纬度给后台。
如图，选择供应商之后在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); },
个人写法，仅供参考
39108571
