vue-baidu-map改为百度地图V3.0版本

1,202 阅读1分钟

很早就用到了vue-baidu-map这个第三方库,也有碰到有时候图层加载不出来的问题,有时间研究了一下,改用了V3.0版本,体验好了很多。

如果不想像下面这么麻烦,有直接可用的百度地图v3.0第三方库L:npm i --save vue-baidu-map-v3

踩坑记录

  1. 现在的vue-baidu-map已经很久没有更新维护了,还是用的百度地图V2.0版本,可能会出现图层不是最新的问题。
  2. 设置地图主题样式:官方的默认是V3.0的JSON文件,复制过来,在V2.0使用,地图图层加载会有问题。
  3. V2.0最大缩放等级只支持18级,V3.0有到19级。

最简单粗暴的办法

直接把依赖包里面的组件全部复制到项目中引入

image.png

圈出部分引入项目中,然后在main.js中配置:

import BaiduMap from './components/VueBaiduMap/index';
Vue.use(BaiduMap, {
  ak: 'key',
});

然后是改 map 文件夹下的 Map.vue,把getMapScript()里面的这一段

$script.setAttribute("src", `https://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=_initBaiduMap`);

v=2.0改成v=3.0,就可以使用3.0的百度地图版本了。

这样就最硬核的完成了改地图版本。照着3.0的参考类,可以顺畅的使用。

常用插件:点聚合,需要单独引入,方法如下:

import { BmlMarkerClusterer } from './components/VueBaiduMap/index';

由于项目中需要简约风格的主题样式,这里推荐一个用到的简约主题JSON:

onReadyBMap({BMap, map}) {
  // 设置地图样式(简约风格地图样式)
  map.setMapStyleV2({ styleJson: [{
    "featureType": "poilabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "poilabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }]});
}

最后附上vue-baidu-map文档地址[:走你](Vue Baidu Map (dafrok.github.io))