Vue BaiduMap 自定义样式的坑

发现问题

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