vue-cli中使用百度地圖（根據輸入框輸入的內容，獲取詳細地址）
阿新 • • 發佈：2018-11-19
效果圖如下：
1.申請百度地圖金鑰（ak）-- http://lbsyun.baidu.com/index.php?title=jspopular
（1）百度地圖開放平臺–開發文件–web開發–JavaScript API–服務介紹–產品簡介–申請金鑰（ak）
（2）檢視應用–建立應用–應用名稱、應用型別（vue中使用百度地圖需要選擇瀏覽器端，因為瀏覽器端的啟用服務包括Javascript API）、Referer白名單–提交
（3）檢視應用–訪問應用（AK）
2.在index.html中新增百度地圖JavaScript API介面
<body> <div id="app"></div> <!--引入百度地圖API--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zpxXXXlFZ" ></script> </body>
3.在build檔案的webpack.base.conf.js配置檔案中的module.exports配置BMap（建立BMap物件），與entry，output，module平級
externals: {
"BMap": "BMap"
},
4.地圖元件中
<template> <div id="all"> <input type="text" id="suggestId" name="address_detail" placeholder="地址" v-model="address_detail" class="input_style"> <div id="allmap"></div> </div> </template> <script> //import BMap from 'BMap' export default { data(){ return { //詳細地址 address_detail: null, userlocation: {lng: "", lat: ""} } }, mounted(){ this.$nextTick(function () { var th = this // 建立Map例項 var map = new BMap.Map("allmap"); // 初始化地圖,設定中心點座標， var point = new BMap.Point(121.160724,31.173277); // 建立點座標，漢得公司的經緯度座標 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); //測試輸出座標（指的是輸入框最後確定地點的經緯度） map.addEventListener("click",function(e){ //經度 console.log(th.userlocation.lng); //維度 console.log(th.userlocation.lat); }) } }) }, } </script>
