<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>百度地图个性化模板列表
developer.baidu.com/map/custom/…
百度地图个性化编辑器
编辑完成后直接复制json文件到自己的项目中即可
developer.baidu.com/map/custom/
