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

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

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

 

官网说明

版本说明

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

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

然后测试 发现正常

Logo

前往低代码交流专区

更多推荐