Vue BaiduMap 自定义样式的坑

技术标签： vue

发现问题

项目使用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)
}

本文链接：https://blog.csdn.net/cai454692590/article/details/107783256

智能推荐

vue的自定义指令的坑

因为一个滑动删除的需求，所以简单写了一份vue自定义指令删除事件。 vue的自定义指令，分为全局和局部的，两者写法其实差距并不大。举例：　　一切都很顺利，照着上面的格式写自定指令都ok，但在绑定数据绑定自定义指令时，发现一个被渲染的数据获取的高度为null，其余的反而完好。　　解决办法，加上一个一次性的定时器就ok了，这可能就是vue的自定义指定绑定的一个坑。...

导读对于前端小白来说，ES5、ES6两套完全不一样的标准放在一起是很头疼的事。导入的时候同时使用两套不同的标准将会在ESLint存在的时候报错。 ES5的写法可以看到，在定义这个Neko类的时候非常冗赘，而且多种多样的闭包让人眼花撩乱、不知所措。如果你对前端更熟悉一点，你会发现，你定义了一个对象，这个对象是一个函数，而且定义即执行。构造函数是直接定义为同名函数，而成员函数则是通过原型prot...

vue 自定义步骤条样式

通过css样式可以将步骤条修改成你自己想要的样式...

vue - 自定义Checkbox 样式组件

使用Sass 定义自定义复选框...

vue局部自定义样式

scoped ::v-deep关键字，采用以下设置对class="treeselect-main"的vue-treeselect 进行局部穿透改变样式...

代码先锋网代码片段及技术文章聚合