vue整合百度地圖顯示指定地點(diǎn)信息
更新時(shí)間：2022年04月06日 09:55:06 作者：智慧包
本文主要介紹了vue整合百度地圖顯示指定地點(diǎn)信息，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
先看看效果圖
一、安裝相關(guān)依賴
npm i --save vue-baidu-map
二、在main.js中引用
import BaiduMap from "vue-baidu-map"
Vue.use(BaiduMap,{
? ak: '你的密鑰(百度地圖開放API官網(wǎng)可免費(fèi)申請(qǐng))'
})三、創(chuàng)建地圖工具 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="+"你的密鑰"+"&callback=init"; ?
? ? ? script.onerror = reject; ?
? ? ? document.head.appendChild(script); ?
? ? }) ?
? } ?在需要用到地圖的文件引入該工具
import { MP } from "@/utils/map.js";四、繪制地圖
1、創(chuàng)建一個(gè)容器展示地圖，給容器指定一個(gè)id，根據(jù)頁面的具體需求指定容器的寬和高
<div class="map">
<div id="container" style="height: 300px; width: 100%" ref="allmap"></div>
</div>2、在data中定義需要用到的數(shù)據(jù)
data() {
return {
dialogMap: false,
mapPointName: "",
mapGetshow: true
}
}3、定義全局的map地圖對(duì)象和geocoder地理編碼對(duì)象
var map; let geoc = null;
4、創(chuàng)建一個(gè)定位地點(diǎn)的方法，添加要展示的地點(diǎn)的名稱，此處也可動(dò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; //獲取第一個(gè)智能搜索的結(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("岳陽樓"); //要展示的地點(diǎn)
},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)用定位地點(diǎn)的方法
});
});
}到此這篇關(guān)于vue整合百度地圖顯示指定地點(diǎn)信息的文章就介紹到這了,更多相關(guān)vue 百度地圖顯示地點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vue項(xiàng)目中使用token的身份驗(yàn)證的簡(jiǎn)單實(shí)踐
這篇文章主要介紹了vue項(xiàng)目中使用token的身份驗(yàn)證的簡(jiǎn)單實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
完美解決iview 的select下拉框選項(xiàng)錯(cuò)位的問題
下面小編就為大家分享一篇完美解決iview 的select下拉框選項(xiàng)錯(cuò)位的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue使用Sass時(shí)報(bào)錯(cuò)問題的解決方法
這篇文章主要介紹了vue使用Sass時(shí)報(bào)錯(cuò)問題的解決方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了vue如何循環(huán)請(qǐng)求一個(gè)接口問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue2.0 根據(jù)狀態(tài)值進(jìn)行樣式的改變展示方法
下面小編就為大家分享一篇vue2.0 根據(jù)狀態(tài)值進(jìn)行樣式的改變展示方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了VUE遞歸樹形實(shí)現(xiàn)多級(jí)列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue使用vue-pdf實(shí)現(xiàn)PDF文件預(yù)覽
這篇文章主要為大家詳細(xì)介紹了Vue如何使用vue-pdf實(shí)現(xiàn)PDF文件預(yù)覽的功能，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，感興趣的可以了解一下2023-03-03
這篇文章主要介紹了vue配置font-awesome5的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Vue-CLI3.x 設(shè)置反向代理的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
vue3如何使用watch監(jiān)聽props中的數(shù)據(jù)
在vue項(xiàng)目中,父子組件數(shù)據(jù)傳遞是最常見的場(chǎng)景,但是今天在開發(fā)過程中父級(jí)數(shù)據(jù)傳遞到子組件,控制子組件的顯隱,下面這篇文章主要給大家介紹了關(guān)于vue3如何使用watch監(jiān)聽props中數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-10-10