溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

詳解vue項目中調(diào)用百度地圖API使用方法

發(fā)布時間：2020-09-10 19:33:57 來源：腳本之家 閱讀：299 作者：wang1006008051 欄目：web開發(fā)

步驟一：申請百度地圖密鑰；

JavaScript API v1.4以及以前的版本無序申請秘鑰（ak），自v1.5版本開始需要先申請秘鑰（ak），才可以使用，如需獲取更高的配額，需要申請  認證企業(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平級；如果還有其他的，同樣在下面引入就可以了，比如自定義覆蓋物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)建一個容器，用來顯示百度地圖（寬高最好都是100%）； 

<div class="baidumap" id="allmap">
</div>

步驟五：在地圖組件中import BMap，否則會出現(xiàn)"BMap undefined"；還有這個BMap_Symbol_SHAPE_POINT，因為是用“_”連字符,會報錯讓你這個沒有用駝峰命名。所以引入時，把這個連字符去掉就行了。

import BMap from 'BMap
import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'

步驟六：創(chuàng)建地圖對象，在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)建標注
 map.addOverlay(marker)    // 將標注添加到地圖中
 }
}

步驟七：將組件插入父組件中；

詳解vue項目中調(diào)用百度地圖API使用方法

以上所述是小編給大家介紹的vue項目中調(diào)用百度地圖API使用方法解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手