Vue项目中使用百度地图+mapv
1、安装依赖npm install vue-baidu-map --savenpm install mapv --save2、main.jsimport BaiduMap from "vue-baidu-map";Vue.use(BaiduMap, {ak: '百度地图key'})3、使用<template><div><baidu-map v-model="addre
·
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文件地址”)
更多推荐
已为社区贡献2条内容
所有评论(0)