百度地圖JavaScript API是一套由JavaScript語言編寫的應(yīng)用程序接口，可幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強(qiáng)的地圖應(yīng)用，支持PC端和移動(dòng)端基于瀏覽器的地圖應(yīng)用開發(fā)，且支持HTML5特性的地圖開發(fā)。
該套API免費(fèi)對(duì)外開放。自v1.5版本起，您需先申請密鑰（ak）才可使用，接口無使用次數(shù)限制。
地址傳送門：http://lbsyun.baidu.com/index.php?title=jspopular
申請密鑰
點(diǎn)擊此處申請密鑰，然后在首頁index.html的head引入下面的js代碼：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密鑰"></script>
注意：
建議先寫個(gè)簡單的html確認(rèn)密鑰正確可用后，再講其引入vue的項(xiàng)目中。因?yàn)橛行┙坛踢@里引入的js的src末尾帶有 &callback=init ，這個(gè)參數(shù)導(dǎo)致了報(bào)錯(cuò)（見下圖），而始終無法正常使用百度地圖api。
webpack 配置文件
如果只是第一步，你調(diào)用百度地圖api時(shí)，報(bào)錯(cuò)： Bmap is not defined ，那么就配置 webpack 配置文件（webpack.base.conf.js）的module.exports中加個(gè)externals：
module.exports = {
context: path.resolve(__dirname, '../'),
entry: { app: './src/main.js' },
//百度地圖配置20180518
externals: {
"BMap": "BMap"
},
...
}
調(diào)用
<template>
<!--地圖容器-->
<div id="fli" class="fli"></div>
</template>
<script>
export default {
name:'',
data () {
return {
}
},
mounted(){
var map = new BMap.Map('fli',{enableMapClick:true}); // 創(chuàng)建Map實(shí)例
map.centerAndZoom(new BMap.Point(104.06, 30.67), 11); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
//添加地圖類型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("成都"); // 設(shè)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的
map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放
},
}
</script>
<style scoped>
.fli{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
</style>
另一種方式：異步加載
跟百度api官網(wǎng)里的異步加載很像。首先跟入口 js（main.js）一樣，新建一個(gè) map.js 。（ak 就是你的密鑰）
export function MP(ak) {
return new Promise(function (resolve, reject) {
window.onload = function () {
resolve(BMap)
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
})
}
在頁面中調(diào)用：
import {MP} from '@/map.js'
export default {
data () {
return {
ak:'', // 這里就是百度地圖密鑰
}
},
mounted(){
this.$nextTick(function() {
var _this = this;
MP(_this.ak).then(BMap => {
// 百度地圖API功能
...
})
})
},
}
注意：
說到 src 末尾的 callback 參數(shù)，是否需要，值又是什么（ init, initialize ），自己去試驗(yàn)，隨便寫個(gè)簡單的html，調(diào)試通了再引入vue。
小提示：
- 使用BMap的時(shí)候不需要import了，import反而會(huì)報(bào)錯(cuò)：BMap is not defined
- 注意一定要給bmap的div設(shè)置高度，否則會(huì)看不見
