首页 > 建站教程 > CSS3+HTML5 >  vue-baidu-map使用个性化底图mapStyle出现加载失败解决办法正文

vue-baidu-map使用个性化底图mapStyle出现加载失败解决办法

最近使用vue-baidu-map,自定义底图时,老是出现加载失败的情况。一开始以为是网络问题,但是连接了百兆宽带的网线还是不行。然后以为是百度地图本身的问题,去官网提了工单也石沉大海。后来无意中发现,使用了mapStyle的网友很多都出现了这个问题,才知道mapStyle已经不维护了,要使用setMapStyleV2,并且还要将地图升级为3.0:


1、打开node_modules/vue-baidu-map/components/map/Map.vue
找到:
$script.src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap`
将2.0改成3.0


2、在<baidu-map>组件加上@ready="handle":
<baidu-map
    class="map"
    :center="center"
    :zoom="10"
    :scroll-wheel-zoom="true"
    :max-zoom="30"
    @ready="handle"
    :min-zoom="10"
>
3、在method加入handle方法
handle({map,BMap}){
  map.setMapStyleV2({
    styleId: '您在百度地图开放平台自定义的id'
  });
},
4、关于自定义的id怎么申请:
进入https://lbsyun.baidu.com/customv2/editor/nostyleid,选择“新建”,选择好地图样式后点击“发布样式”即可得到一个id,这个id就是上面的id