vue 百度地圖自定義樣式

<template>
 <div class='amount'>
  <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="14" :mapStyle="mapStyle">
    <bml-heatmap :data="data" :max="100" :radius="20">
      </bml-heatmap>
    </baidu-map>
 </div>
</template>
<script>
import {BmlHeatmap} from 'vue-baidu-map'
export default {
  data () {
    return {
      mapStyle: {
        styleJson: [
          {
                    "featureType": "land",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#212121"
                    }
          },
          {
                    "featureType": "building",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#2b2b2b"
                    }
          },
          {
                    "featureType": "highway",
                    "elementType": "all",
                    "stylers": {
                              "lightness": -42,
                              "saturation": -91
                    }
          },
          {
                    "featureType": "arterial",
                    "elementType": "geometry",
                    "stylers": {
                              "lightness": -77,
                              "saturation": -94
                    }
          },
          {
                    "featureType": "green",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#1b1b1b"
                    }
          },
          {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#181818"
                    }
          },
          {
                    "featureType": "subway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                              "color": "#181818"
                    }
          },
          {
                    "featureType": "railway",
                    "elementType": "geometry",
                    "stylers": {
                              "lightness": -52
                    }
          },
          {
                    "featureType": "all",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                              "color": "#313131"
                    }
          },
          {
                    "featureType": "all",
                    "elementType": "labels.text.fill",
                    "stylers": {
                              "color": "#8b8787"
                    }
          },
          {
                    "featureType": "manmade",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#1b1b1b"
                    }
          },
          {
                    "featureType": "local",
                    "elementType": "geometry",
                    "stylers": {
                              "lightness": -75,
                              "saturation": -91
                    }
          },
          {
                    "featureType": "subway",
                    "elementType": "geometry",
                    "stylers": {
                              "lightness": -65
                    }
          },
          {
                    "featureType": "railway",
                    "elementType": "all",
                    "stylers": {
                              "lightness": -40
                    }
          },
          {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#8b8787",
                              "weight": "1",
                              "lightness": -29
                    }
          }
        ]
      },
      data: [
        {lng: 116.418261, lat: 39.921984, count: 510},
        {lng: 116.423332, lat: 39.916532, count: 511},
        {lng: 116.419787, lat: 39.930658, count: 115}
      ]
    }
  },
  components: {
    BmlHeatmap
  },
  methods: {
    updateCirclePath (e) {
      this.circlePath.center = e.target.getCenter()
      this.circlePath.radius = e.target.getRadius()
    }
  }
}
</script>

<style lang='less' scoped>
.map {

  width: 100%;
  height: 800px;
}
</style>

百度地圖個性化模板列表

https://developer.baidu.com/map/custom/list.htm

百度地圖個性化編輯器

編輯完成後直接複製json文件到自己的項目中即可

https://developer.baidu.com/map/custom/