发现问题

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

前往低代码交流专区

更多推荐