【vue-baidu-map】自定义地图

目录

自定义地图

技术点

个性化地图配置

自定义地图

第一个坑：移动地图出现文字堆叠

第二个坑：地图瓦片不全

---

自定义地图

技术点

官网地址：Vue Baidu Map

百度指南：jspopularGL | 百度地图API SDK

自定义工具：https://lbsyun.baidu.com/apiconsole/custommap

个性化地图配置

打开自定义工具（https://lbsyun.baidu.com/apiconsole/custommap）

选择新建去自定义

 右侧的按钮可以进行一些操作。

 JSON文件中的内容就可以在下方代码中使用。

自定义地图

// index.html
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=mFc3PTQ5074zOK7I0ruGp"></script>

<template>
  <baidu-map class="map" 
    :center="{lng: 116.404, lat: 39.915}" 
    :zoom="15" 
    @ready="handler">
  </baidu-map>
</template>
<script>
export default {
  data () {
    return {
      styleJson: [{
        'featureType': 'land',
        'elementType': 'geometry',
        'stylers': {
          'color': '#053448ff'
        }
      }, {
        'featureType': 'background',
        'elementType': 'geometry',
        'stylers': {
          'color': '#053448ff'
        }
      }, {
        'featureType': 'road',
        'elementType': 'geometry.fill',
        'stylers': {
          'color': '#13bab3ff'
        }
      }, {
        'featureType': 'road',
        'elementType': 'geometry.stroke',
        'stylers': {
          'color': '#13bab3ff'
        }
      }],
    }
  },
  methods:{
    handler ({ BMap, map }) {
      map.setMapStyleV2({
        styleJson: this.styleJson
      })
    },
  }
}
</script>

在完成的过程中踩了两个坑。

第一个坑：移动地图出现文字堆叠

使用的是引入id的方式，修改成使用json会更加稳定。（图片为网络图片，侵必删）

map.setMapStyle({
    styleId: 'a84a2633daa95eb68ceb4bdb9bc'
})

 改成下面这种就可以了（疑惑脸）： 

map.setMapStyleV2({
    styleJson: this.styleJson
})

这里的styleId是

第二个坑：地图瓦片不全

 发生的原因是现在自定义样式所引入的文件需要升级了

map.setMapStyle({
    styleJson: this.styleJson
})

改成setMapStyleV2： 

map.setMapStyleV2({
    styleJson: this.styleJson
})