1、安装依赖
npm install vue-baidu-map --save
npm install mapv --save
2、main.js
import BaiduMap from "vue-baidu-map";Vue.use(BaiduMap, {ak: '百度地图key'})
3、使用
<template><div><baidu-map v-model="addressKeyword"@ready="handler":scroll-wheel-zoom="true":center="location":zoom="zoom"></baidu-map></div><script>export default {name: 'iMap,methods: {handler({BMap, map}) {this.mapv = require("../../../public/mapv.js")// 地图相关配置代码......var mapvLayer = new this.mapv.baiduMapLayer(map, dataSet, options);}}</script></template>
4、遇到过的问题
1》mapv.js在index.html中引用，mapv报错this.show is not a function
原因： mapv.js加载先于地图，导致BMap$1为undefined，如下：
function CanvasLayer(options) {... ...this.show();}var global$3 = typeof window === 'undefined' ? {} : window;var BMap$1 = global$3.BMap || global$3.BMapGL || global$3.BaiduMap;**if (BMap$1) {CanvasLayer.prototype = new BMap$1.Overlay();... ...CanvasLayer.prototype.show = function () {if (!this.canvas) {this._map.addOverlay(this);}this.canvas.style.display = "block";};}
解决方法：百度地图加载完成后，再引入mapv.js，即在本例handler中 this.mapv = require(“mapv.js文件地址”)
