vue-baidu-map 个性化地图

最近需要用到百度地图开发项目 需要使用个性化地图

刚开始使用的接口是Map.setMapStyle 发现地图有时可以正常加载 有时不可以正常加载

后来经过查阅官网资料得知 旧版个性化地图服务（Map.setMapStyle接口）已经不再更新

 

官网说明

版本说明

JavaScript API支持的个性化地图服务有两个版本，旧版个性化地图服务（Map.setMapStyle接口）已经不再更新。本文介绍新版本个性化地图服务（Map.setMapStyleV2接口）的使用方式。
两个版本的区别如下表所示：

	旧版个性化地图	新版个性化地图
支持的JavaScript API版本	2.0、3.0	3.0、GL
底图绘制方式	瓦片图	前端绘制
兼容性	所有主流浏览器	支持HTML5的现代浏览器
样式调用方式	加载样式json	加载样式json、加载样式ID
是否支持样式样式在线更新	否	是
是否支持分缩放级别配置地图样式	否	是
支持配置元素分类	29种	58种
接口	Map.setMapStyle	Map.setMapStyleV2

然后发现无法调用Map.setMapStyleV2 经过查阅 原来vue-baidu-map 使用的是2.0

将2.0直接该为3.0是无法生效的

解决方法

将node_modules/veu-baidu-map/components 整个文件夹复制出来

main.js中更改你复制之后存放的路径

然后将2.0 改为3.0

发现还是不能正常使用

最后去@ready="handle"

handle方法中添加

        function a() {
          try {
            map.setMapStyleV2({
              styleId: '自定义样式的id'
            });
          } catch (e) {
            setTimeout(function () {
              a()
            }, 50)
          }
        }
        a();

然后测试 发现正常