Vue的模态框中实现 根据详细地址定位经纬度

最近在项目中遇到这样一个需求，在新增商品的模态框中，根据拿到的地址在地图上显示具体位置，并把经纬度给后台。

如图，选择供应商之后在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);

    },

个人写法，仅供参考