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

很早就用到了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级。

最简单粗暴的办法

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

圈出部分引入项目中，然后在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))