在vue項(xiàng)目里面引入百度地圖api有兩種方式治唤，一個(gè)是官方文檔提供
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰"></script>
然后在webpack里面需要配置externals選項(xiàng)花履，設(shè)置外部擴(kuò)展
externals: {
'BaiduMap': 'BMap'
}
在使用的時(shí)候牍疏，組件里面需要引入
import BaiduMap from 'BaiduMap'
mounted() {
var map = new BaiduMap.Map(xxx)
}
另一種是用vue-baidu-map
官方文檔
具體引用查看文檔
在這里說(shuō)一個(gè)很重要的問(wèn)題箍铲，就是使用vue-baidu-map的話(huà)菩收，很多方法沒(méi)有辦法使用梨睁，這個(gè)時(shí)候需要引入外部文件或者庫(kù)
比如，我們需要引入GeoUtils娜饵，方法參考上面第一種方法
index.html
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
webpack.base.conf.js
externals:{
'BMapLib': 'BMapLib'
}
組件引用
import BMapLib from 'BMapLib'
但是這里面我們很多時(shí)候需要用一個(gè)BMap坡贺，怎么辦呢？
vue-baidu-map文檔有一處說(shuō)明
由于百度地圖 JS API 只有 JSONP 一種加載方式箱舞，因此 BaiduMap 組件及其所有子組件的渲染只能是異步的遍坟。因此，請(qǐng)使用在組件的 ready 事件來(lái)執(zhí)行地圖 API 加載完畢后才能執(zhí)行的代碼晴股，不要試圖在 vue 自身的生命周期中調(diào)用 BMap 類(lèi)愿伴，更不要在這些時(shí)機(jī)修改 model 層。
使用方法：
<template>
<baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {
data () {
return {
BMap: null
}
},
methods: {
handler ({BMap, map}) {
this.BMap = Bmap
}
}
}
</script>
這樣我們就可以在methods方法里面使用Bmap了电湘，this.BMap.Point(xxx, xxx)隔节、this.BMap.Polygon(xxx)
