Vue BaiduMap 自定义样式的坑
发现问题项目使用vue-baidu-map进行开发使用baidu-map标签渲染地图并且mapStyle自定义样式,发现地图的底图已经落后了。如果去掉mapStyle的属性, 底图又跟官网一样,最后查了一下baidu-map组件,发现封装的setMapStyle的方法是旧方法setMapStyle现在新地图底图都是使用setMapStyleV2方法. 而且组件里面引用的js也是2.0的版本解决问题
·
发现问题
- 项目使用vue-baidu-map进行开发
- 使用baidu-map标签渲染地图并且mapStyle自定义样式,发现地图的底图已经落后了。
- 如果去掉mapStyle的属性, 底图又跟官网一样,
- 最后查了一下baidu-map组件,发现封装的setMapStyle的方法是旧方法setMapStyle
- 现在新地图底图都是使用setMapStyleV2方法. 而且组件里面引用的js也是2.0的版本
解决问题
- 在index.html页面引入百度地图3.0js
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=ak"></script>
- 在组件baidu-map的回调方法里面调用setMapStyleV2方法
<baidu-map class="map"
:center="center"
:continuous-zoom="true"
:double-click-zoom="false"
:scroll-wheel-zoom="true"
:zoom="zoom"
@ready="handler"
@zoomend="syncCenterAndZoom"/>
handler({BMap, map}) {
let that = this;
that.map = map;
//使用3.0js版本set值
map.setMapStyleV2(that.mapStyle)
}
更多推荐
已为社区贡献4条内容
所有评论(0)