您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue怎么整合百度地圖顯示指定地點信息”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“vue怎么整合百度地圖顯示指定地點信息”吧!
先看看效果圖
npm i --save vue-baidu-map
import BaiduMap from "vue-baidu-map" Vue.use(BaiduMap,{ ak: '你的密鑰(百度地圖開放API官網(wǎng)可免費申請)' })
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="+"你的密鑰"+"&callback=init"; script.onerror = reject; document.head.appendChild(script); }) }
在需要用到地圖的文件引入該工具
import { MP } from "@/utils/map.js";
1、創(chuàng)建一個容器展示地圖,給容器指定一個id,根據(jù)頁面的具體需求指定容器的寬和高
<div class="map"> <div id="container" ref="allmap"></div> </div>
2、在data中定義需要用到的數(shù)據(jù)
data() { return { dialogMap: false, mapPointName: "", mapGetshow: true } }
3、定義全局的map地圖對象和geocoder地理編碼對象
var map; let geoc = null;
4、創(chuàng)建一個定位地點的方法,添加要展示的地點的名稱,此處也可動態(tài)指定
mapNameChange() { let that = this, point, marker = null; let local = new BMap.LocalSearch(map, { renderOptions: { map: map }, onSearchComplete: (res) => { if (local.getResults() != undefined) { map.clearOverlays(); //清除地圖上所有覆蓋物 if (local.getResults().getPoi(0)) { point = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結(jié)果 map.centerAndZoom(point, 10); marker = new BMap.Marker(point); // 創(chuàng)建標(biāo)注 map.addOverlay(marker); // 將標(biāo)注添加到地圖中 marker.enableDragging(); // 可拖拽 geoc.getLocation(point, function (rs) { var addComp = rs.addressComponents; that.mapPointName = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber; }); } else { console.log("未搜索到結(jié)果") } } else { alert("未搜索到結(jié)果"); } }, }); local.search("岳陽樓"); //要展示的地點 },
5、在mounted函數(shù)中調(diào)用上述方法并繪制地圖
mounted() { this.$nextTick(function () { var _this = this; MP(_this.ak).then((BMap) => { let that = this; this.dialogMap = !this.dialogMap; if (that.mapGetshow) { map = new BMap.Map("container"); //存放地圖容器的id geoc = new BMap.Geocoder(); map.enableScrollWheelZoom(); } _this.mapNameChange() //調(diào)用定位地點的方法 }); }); }
感謝各位的閱讀,以上就是“vue怎么整合百度地圖顯示指定地點信息”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對vue怎么整合百度地圖顯示指定地點信息這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。