版权声明:本文为博主原创文章,未经博主允许不得用于任何商业用途,转载请注明出处。 https://blog.csdn.net/fyyyr/article/details/84958044
百度地图官方提供的是常规<script>
标签引入的方法。要想将百度地图引入Vue中,有两种方式:
- 在index.html中引入js文件;修改webpack.base.conf.js来增加externals属性;在主js中调用Vue.use来全局注册或在单个页面中使用import单独引入。这样,在页面中就可以像常规的页面那样使用百度地图了。需要为容器
<div>
设置一个id属性来初始化地图。 - 定义一个js文件,export一个加载函数,在其中为document动态添加
<script>
标签,并加载官方的地图js库。在页面中将该函数import导入,然后正常使用即可。同样需要一个含id属性的容器<div>
。
上面这两种方式,1比较直观,2更贴近Vue的风格。百度官方提供了Vue Baidu Map,就是使用了方式2。
Vue Baidu Map定义了一个getMapScript()
函数,在其中为document动态创建了一个<script>
标签,并将其src设为百度地图JavaScript API v2.0。因此,Vue Baidu Map仅仅是百度官方推出的一个Vue封装,核心功能是动态下载的,与常规页面的百度地图js库是相同的。
然而,Vue Baidu Map是针对百度地图JavaScript API v2.0进行的封装,目前并不兼容百度地图JavaScript API v3.0。
安装
调用命令:
npm install vue-baidu-map --save
安装完成后,package.json中就会添加依赖:
"dependencies": {
...
"vue-baidu-map": "^0.21.14",
...
},
node_modules文件夹下也会出现vue-baidu-map文件夹。
使用
在页面中进行导入:
import { BaiduMap, BmScale, BmMapType, BmNavigation } from 'vue-baidu-map/components'
在node_modules/vue-baidu-map/components/index.js中,导出了官方封装的所有地图Vue组件。因此这里可以直接引入多个所需要的组件。
然后在页面的components中注册:
components: { BaiduMap, BmScale, BmMapType, BmNavigation },
然后在页面中使用组件即可:
<baidu-map class="map-container" v-bind="mapOptions" @ready="mapReady" @load="mapLoad" >
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"/>
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"/>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
</baidu-map>
组件中传入的属性定义在data中。
data() {
return {
mapOptions: {
ak: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
center: '北京',
scrollWheelZoom: true
}
}
},
上面为组件注册了ready事件与load事件函数:
methods: {
mapReady(e) {
console.log("map ready");
// let map = e.currentTarget;
},
mapLoad(e) {
console.log("map load");
// let BMap = e.BMap;
// let map = e.map;
}
}
其中:
- ready事件与load事件无必然关联。
- ready事件是Vue封装触发。load事件是百度地图JavaScript API v2.0提供。
- ready事件组件渲染完毕后触发,通常只触发一次。load事件在组件加载时触发,多次加载会触发多次。
- ready事件与load事件的触发并无绝对先后顺序。地图主组件BaiduMap在center属性为String时,zoom属性为非必要,此时会先触发ready,后触发load;然而在center属性为Point对象时,zoom属性为必要,此时会先触发load,后触发ready。
- ready事件传入的参数为:
{BMap, map}
。BMap为百度地图构造函数,map为实例化后的地图对象。load事件传入的参数中包含多个属性,其中有个currentTarget属性,就是map实例。 - 所有地图组件都有ready事件。但只有地图主组件BaiduMap会触发load事件,其他地图组件不会触发。
- 各个地图组件的ready是按定义顺序触发,故地图主组件BaiduMap的ready一定是最早触发的。因此,在地图主组件的ready中尝试操作子组件有可能不会成功,因为此时子组件尚未ready。所以对组件的操作通常是在组件的ready事件中操作。
- 若要调用官方API为map动态添加元素,可以在BaiduMap组件的ready事件中执行。