当前位置: 代码迷 >> 综合 >> vue-baidu-map 个性化地图
  详细解决方案

vue-baidu-map 个性化地图

热度:192   发布时间:2023-10-31 13:40:35.0

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

刚开始使用的接口是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();

然后测试 发现正常

  相关解决方案