Vue中加载百度地图

借助百度地图的 LocalSearch 和 Autocomplete 两个方法

实现方式：通过promise以及百度地图的callback回调函数

map.js

 1       export function MP(ak) {
 2           return new Promise(function (resolve, reject) {
 3                window.init = function () {
 4               resolve(BMap)
 5          }
 6         var script = document.createElement("script");
 7         script.type = "text/javascript";
 8         script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
 9         script.onerror = reject;
10         document.head.appendChild(script);
11       })
12     }

使用

 1 <template>
 2     <input type="text" id="suggestId" name="address_detail" placeholder="如门牌号等" v-model="address_detail" class="input_style">
 3     <div id="allmap"></div>
 4  </template>
 5 <script>
 6 import {MP} from '../../map'
 7
 8  data(){
 9       return{
10          address_detail: null, //详细地址
11          userlocation:{lng:"",lat:""},
12       }
13  },
14 mounted(){
15       this.$nextTick(function () {
16           MP("你的ak").then( BMap => {
17             var th = this
18             var map = new BMap.Map("allmap");            // 创建Map实例
19             var point = new BMap.Point(116.404, 39.915); // 创建点坐标
20             map.centerAndZoom(point,15);
21             map.enableScrollWheelZoom();
22             var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
23               {"input" : "suggestId"
24               ,"location" : map
25             })
26             var myValue
27             ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
28               var _value = e.item.value;
29               myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
30                this.address_detail = myValue
31               setPlace();
32             });
33
34             function setPlace(){
35               map.clearOverlays();    //清除地图上所有覆盖物
36               function myFun(){
37                 th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
38                 map.centerAndZoom(th.userlocation, 18);
39                 map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
40               }
41               var local = new BMap.LocalSearch(map, { //智能搜索
42                 onSearchComplete: myFun
43               });
44               local.search(myValue);
45             }
46             })
47           })
48   },
49 </script>

效果