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>
