詳解vue項(xiàng)目中調(diào)用百度地圖API使用方法
步驟一：申請(qǐng)百度地圖密鑰；
JavaScript API v1.4以及以前的版本無序申請(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è)容器，用來顯示百度地圖（寬高最好都是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è)沒有用駝峰命名。所以引入時(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作
這篇文章主要介紹了如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue輸入框中輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中的實(shí)現(xiàn)方法
最近在工作中遇到了些問題,總結(jié)下分享給同樣遇到這個(gè)問題的朋友,這篇文章主要給大家介紹了關(guān)于vue輸入框中輸完后光標(biāo)自動(dòng)跳到下一個(gè)輸入框中的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-03-03
項(xiàng)目中需要用到大量的數(shù)字輸入框限制,為了可以以后能又更多的拓展性,下面這篇文章主要給大家介紹了關(guān)于Vue中輸入框僅支持?jǐn)?shù)字輸入的四種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
vue3+elementPlus?table中添加輸入框并提交校驗(yàn)
這篇文章主要介紹了vue3+elementPlus?table里添加輸入框并提交校驗(yàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue如何在引入的el-tree前添加圖標(biāo)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題
這篇文章主要介紹了elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue setInterval 定時(shí)器失效的解決方式
這篇文章主要介紹了vue setInterval 定時(shí)器失效的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue3超出文本展示el tooltip實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3超出文本展示el tooltip實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
在 Vue Router 4 中,嵌套路由是一種非常重要的功能,它允許我們創(chuàng)建更復(fù)雜的 UI 結(jié)構(gòu),同時(shí)保持路由的清晰和易于管理,這篇文章主要介紹了Vue Router4 嵌套路由,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細(xì)介紹了vuejs事件中心管理組件間的通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08