vue 百度地图自定义样式

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

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3MzE4MTc3_size_16_color_FFFFFF_t_70

  1. <template>
  2.  <div class='amount'>
  3.   <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="14" :mapStyle="mapStyle">
  4.     <bml-heatmap :data="data" :max="100" :radius="20">
  5.       </bml-heatmap>
  6.     </baidu-map>
  7.  </div>
  8. </template>
  9. <script>
  10. import {BmlHeatmap} from 'vue-baidu-map'
  11. export default {
  12.   data () {
  13.     return {
  14.       mapStyle: {
  15.         styleJson: [
  16.           {
  17.                     "featureType": "land",
  18.                     "elementType": "geometry",
  19.                     "stylers": {
  20.                               "color": "#212121"
  21.                     }
  22.           },
  23.           {
  24.                     "featureType": "building",
  25.                     "elementType": "geometry",
  26.                     "stylers": {
  27.                               "color": "#2b2b2b"
  28.                     }
  29.           },
  30.           {
  31.                     "featureType": "highway",
  32.                     "elementType": "all",
  33.                     "stylers": {
  34.                               "lightness": -42,
  35.                               "saturation": -91
  36.                     }
  37.           },
  38.           {
  39.                     "featureType": "arterial",
  40.                     "elementType": "geometry",
  41.                     "stylers": {
  42.                               "lightness": -77,
  43.                               "saturation": -94
  44.                     }
  45.           },
  46.           {
  47.                     "featureType": "green",
  48.                     "elementType": "geometry",
  49.                     "stylers": {
  50.                               "color": "#1b1b1b"
  51.                     }
  52.           },
  53.           {
  54.                     "featureType": "water",
  55.                     "elementType": "geometry",
  56.                     "stylers": {
  57.                               "color": "#181818"
  58.                     }
  59.           },
  60.           {
  61.                     "featureType": "subway",
  62.                     "elementType": "geometry.stroke",
  63.                     "stylers": {
  64.                               "color": "#181818"
  65.                     }
  66.           },
  67.           {
  68.                     "featureType": "railway",
  69.                     "elementType": "geometry",
  70.                     "stylers": {
  71.                               "lightness": -52
  72.                     }
  73.           },
  74.           {
  75.                     "featureType": "all",
  76.                     "elementType": "labels.text.stroke",
  77.                     "stylers": {
  78.                               "color": "#313131"
  79.                     }
  80.           },
  81.           {
  82.                     "featureType": "all",
  83.                     "elementType": "labels.text.fill",
  84.                     "stylers": {
  85.                               "color": "#8b8787"
  86.                     }
  87.           },
  88.           {
  89.                     "featureType": "manmade",
  90.                     "elementType": "geometry",
  91.                     "stylers": {
  92.                               "color": "#1b1b1b"
  93.                     }
  94.           },
  95.           {
  96.                     "featureType": "local",
  97.                     "elementType": "geometry",
  98.                     "stylers": {
  99.                               "lightness": -75,
  100.                               "saturation": -91
  101.                     }
  102.           },
  103.           {
  104.                     "featureType": "subway",
  105.                     "elementType": "geometry",
  106.                     "stylers": {
  107.                               "lightness": -65
  108.                     }
  109.           },
  110.           {
  111.                     "featureType": "railway",
  112.                     "elementType": "all",
  113.                     "stylers": {
  114.                               "lightness": -40
  115.                     }
  116.           },
  117.           {
  118.                     "featureType": "boundary",
  119.                     "elementType": "geometry",
  120.                     "stylers": {
  121.                               "color": "#8b8787",
  122.                               "weight": "1",
  123.                               "lightness": -29
  124.                     }
  125.           }
  126.         ]
  127.       },
  128.       data: [
  129.         {lng: 116.418261, lat: 39.921984, count: 510},
  130.         {lng: 116.423332, lat: 39.916532, count: 511},
  131.         {lng: 116.419787, lat: 39.930658, count: 115}
  132.       ]
  133.     }
  134.   },
  135.   components: {
  136.     BmlHeatmap
  137.   },
  138.   methods: {
  139.     updateCirclePath (e) {
  140.       this.circlePath.center = e.target.getCenter()
  141.       this.circlePath.radius = e.target.getRadius()
  142.     }
  143.   }
  144. }
  145. </script>
  147. <style lang='less' scoped>
  148. .map {
  150.   width: 100%;
  151.   height: 800px;
  152. }
  153. </style>

百度地图个性化模板列表

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

百度地图个性化编辑器

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

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

发表评论

表情：
评论列表 （有 0 条评论，1667人围观）

还没有评论，来说两句吧...

相关阅读