vue 百度地图自定义样式

今天药忘吃喽~ 2021-10-01 04:34 1614阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3MzE4MTc3_size_16_color_FFFFFF_t_70][]

<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][https_developer.baidu.com_map_custom_list.htm]

百度地图个性化编辑器

编辑完成后直接复制json文件到自己的项目中即可

[https://developer.baidu.com/map/custom/][https_developer.baidu.com_map_custom]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3MzE4MTc3_size_16_color_FFFFFF_t_70]: /images/20210724/1a2ee1aec4394e17bf93f55252711f07.png
[https_developer.baidu.com_map_custom_list.htm]: https://developer.baidu.com/map/custom/list.htm
[https_developer.baidu.com_map_custom]: https://developer.baidu.com/map/custom/