一、使用vue-baidu-map
https://dafrok.github.io/vue-baidu-map/#/zh/start/installation
npm安装后
npm i --save vue-baidu-map
import即可使用
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})
问题是已经很久没有更新了,简单的使用还是很方便的
二、通过javascript直接引入
1、在index.html中引入
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak= 你的key" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的key"></script>
上面除了第一个,其他的都是百度地图的第三方插件,关于插件根据自己需求导入
2、在vue.config.js中添加externals的部分
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
externals: {
'BaiduMap': 'BMap',
'BMapLib': 'BMapLib'
},
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
3、在具体使用地图的页面import
import BaiduMap from 'BaiduMap'
import BMapLib from 'BMapLib'
4、页面中放置一个div
扫描二维码关注公众号,回复:
11883065 查看本文章
<div id="allmap" />
5、实例化地图组件
this.map = new BaiduMap.Map('allmap') // 创建地图实例
6、按照官方API做相应调用即可,比如设置地图中心点:
this.map.centerAndZoom(new BaiduMap.Point(this.center.lng, this.center.lat), this.zoom) // 初始化地图,设置中心点坐标和地图级别
7、第三方插件使用方式同理
比如使用聚合点
this.markerClusterer = new BMapLib.MarkerClusterer(this.map, { markers: null })
this.markerClusterer.addMarkers(markers)
注意上面的变量带tihs.只是因为在页面export的data()中初始化了,为了全局调用。实际只是一个js对象,正常使用即可
export default {
data() {
return {
}
}
}