Vue项目中使用百度地图+mapv

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文件地址”)