詳解vue項(xiàng)目中調(diào)用百度地圖API使用方法
步驟一：申請(qǐng)百度地圖密鑰；
JavaScript API v1.4以及以前的版本無(wú)序申請(qǐng)秘鑰（ak），自v1.5版本開始需要先申請(qǐng)秘鑰（ak），才可以使用，如需獲取更高的配額，需要申請(qǐng) 認(rèn)證企業(yè)用戶。百度地圖API 鏈接地址:http://lbsyun.baidu.com/apiconsole/key
步驟二：在index.html中添加百度地圖JavaScript API接口；
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script> // v1.4版本以及以前版本
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘鑰" ></script> //1.5版本，需要秘鑰
步驟三：在webpack.base.conf.js配置文件中配置BMap，在module.exports 中與entry平級(jí)；如果還有其他的，同樣在下面引入就可以了，比如自定義覆蓋物BMap_Symbol_SHAPE_POINT等。 (需要重新 npm run dev才可以)
module.exports = {
entry: {
app: './src/main.js'
},
externals: {
'BMap': 'BMap',
'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT'
},
步驟四：在組件中創(chuàng)建一個(gè)容器，用來(lái)顯示百度地圖（寬高最好都是100%）；
<div class="baidumap" id="allmap"> </div>
步驟五：在地圖組件中import BMap，否則會(huì)出現(xiàn)"BMap undefined"；還有這個(gè)BMap_Symbol_SHAPE_POINT，因?yàn)槭怯谩癬”連字符,會(huì)報(bào)錯(cuò)讓你這個(gè)沒(méi)有用駝峰命名。所以引入時(shí)，把這個(gè)連字符去掉就行了。
import BMap from 'BMap
import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'
步驟六：創(chuàng)建地圖對(duì)象，在mounted生命周期調(diào)用；
mounted () {
this.baiduMap()
},
methods: {
// 返回
goback () {
this.$router.go(-1)
},
baiduMap () {
var map = new BMap.Map('allmap')
var point = new BMap.Point(111.742579, 40.818675)
map.centerAndZoom(point, 12)
var marker = new BMap.Marker(point) // 創(chuàng)建標(biāo)注
map.addOverlay(marker) // 將標(biāo)注添加到地圖中
}
}
步驟七：將組件插入父組件中；
以上所述是小編給大家介紹的vue項(xiàng)目中調(diào)用百度地圖API使用方法解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
基于vue實(shí)現(xiàn)分頁(yè)/翻頁(yè)組件paginator示例
本篇文章主要介紹了基于vue實(shí)現(xiàn)分頁(yè)/翻頁(yè)組件paginator示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
這篇文章主要為大家介紹了前端面試之vue2和vue3的區(qū)別有哪些，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖效果
這篇文章主要介紹了基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue修改打包配置如何實(shí)現(xiàn)代碼打包后的自定義命名
這篇文章主要介紹了vue修改打包配置如何實(shí)現(xiàn)代碼打包后的自定義命名，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法
這篇文章主要介紹了Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法,文中補(bǔ)充介紹了VUE-Element組件 CheckBox多選框使用方法,需要的朋友可以參考下2024-01-01
基于Vue3+Element Plus 實(shí)現(xiàn)多表單校驗(yàn)demo
表單校驗(yàn)在日常的開發(fā)需求中是一種很常見的需求,通常在提交表單發(fā)起請(qǐng)求前校驗(yàn)用戶輸入是否符合規(guī)則,通常只需formRef.value.validate()即可校驗(yàn),本文給大家介紹基于Vue3+Element Plus 實(shí)現(xiàn)多表單校驗(yàn)demo,感興趣的朋友一起看看吧2024-06-06
vue項(xiàng)目實(shí)現(xiàn)添加圖片裁剪組件
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)添加圖片裁剪組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的方法
之前做項(xiàng)目的時(shí)候,使用了Collapse折疊面板,下面這篇文章主要給大家介紹了關(guān)于Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-03-03
Vue學(xué)習(xí)筆記進(jìn)階篇之vue-router安裝及使用方法
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之vue-router安裝及使用方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
一文快速學(xué)會(huì)阻止事件冒泡的4種方法(原生js阻止,vue中使用修飾符阻止)
冒泡就是事件開始是由最具體的元素接收,然后逐層向上級(jí)傳播到較為不具體的元素,這篇文章主要給大家介紹了關(guān)于阻止事件冒泡的4種方法,文中介紹的方法分別是原生js阻止以及vue中使用修飾符阻止的相關(guān)資料,需要的朋友可以參考下2023-12-12