最近需要用到百度地图开发项目 需要使用个性化地图
刚开始使用的接口是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();
然后测试 发现正常