Vue中加载百度地图

近期新项目使用了vue，因为涉及到物流配送，需要获取用户的位置坐标，要借助百度地图的 LocalSearch 和 Autocomplete 两个方法
实现方式：通过promise以及百度地图的callback回调函数

map.js

      export function MP(ak) {
          return new Promise(function (resolve, reject) {
               window.init = function () {
              resolve(BMap)
         }
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
        script.onerror = reject;
        document.head.appendChild(script);
      })
    }

使用

 <template>
    <input type="text" id="suggestId" name="address_detail" placeholder="如门牌号等" v-model="address_detail" class="input_style">
    <div id="allmap"></div>
 </template>
<script>
import {MP} from '../../map'

 data(){
      return{
         address_detail: null, //详细地址
         userlocation:{lng:"",lat:""},          
      }
 },
mounted(){
      this.$nextTick(function () {
          MP("你的ak").then( BMap => {
            var th = this
            var map = new BMap.Map("allmap");            // 创建Map实例
            var point = new BMap.Point(116.404, 39.915); // 创建点坐标
            map.centerAndZoom(point,15);
            map.enableScrollWheelZoom();
            var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
              {"input" : "suggestId"
              ,"location" : map
            })
            var myValue
            ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
              var _value = e.item.value;
              myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
               this.address_detail = myValue
              setPlace();
            });

            function setPlace(){
              map.clearOverlays();    //清除地图上所有覆盖物
              function myFun(){
                th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(th.userlocation, 18);
                map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
              }
              var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
              });
              local.search(myValue);
            }
            })
          })
  },
</script>

效果

转载于:https://www.cnblogs.com/NearTheSea/p/6808093.html