溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
步驟一：申請百度地圖密鑰；
JavaScript API v1.4以及以前的版本無序申請秘鑰（ak），自v1.5版本開始需要先申請秘鑰（ak），才可以使用，如需獲取更高的配額，需要申請 認證企業用戶。百度地圖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'
},
步驟四：在組件中創建一個容器，用來顯示百度地圖（寬高最好都是100%）；
<div class="baidumap" id="allmap"> </div>
步驟五：在地圖組件中import BMap，否則會出現"BMap undefined"；還有這個BMap_Symbol_SHAPE_POINT，因為是用“_”連字符,會報錯讓你這個沒有用駝峰命名。所以引入時，把這個連字符去掉就行了。
import BMap from 'BMap
import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'
步驟六：創建地圖對象，在mounted生命周期調用；
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) // 創建標注
map.addOverlay(marker) // 將標注添加到地圖中
}
}
步驟七：將組件插入父組件中；
以上所述是小編給大家介紹的vue項目中調用百度地圖API使用方法解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
