通过styleId设置地图样式不生效

来源：8-1 （上）销售大盘地图组件开发

慕桂英1178280

2020-07-05

mapStyle: {
	styleId: 'ae2291f853c26c030656ffe33e6fbc4d'
}

写回答

3回答

aiyoudiao

2020-09-23

不是老师的锅，是echarts@4.9.0版本的bmap代码有问题，里面map2.0部分的`if (!isEmptyObject(newMapStyle2)) {`中的应该改成newMapStyle，不然2.0永远无法setMapStyle方法。调用不了这个setMapStyle方法，那么就你写的mapStyle就不会有用了。

aiyoudiao

2020-09-23

<template>
  <div class="bmap">
    <vue-echarts :options="options"></vue-echarts>
  </div>
</template>

<script>
import 'echarts/extension/bmap/bmap'

export default {
  data () {
    return {
      options: {}
    }
  },
  mounted () {
    this.options = {
      bmap: {
        key: 'G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb',
        center: [104.114129, 37.550339], /* 中心点 */
        zoom: 5, /* 缩放比例，焦距 */
        roam: false, /* 是否允许缩放 */
        mapStyle: {
          // styleId: 'ae2291f853c26c030656ffe33e6fbc4d',
          styleJson: [{
            featureType: 'water',
            elementType: 'all',
            stylers: {
              color: '#044161'
            }
          }, {
            featureType: 'land',
            elementType: 'all',
            stylers: {
              color: '#091934'
            }
          }, {
            featureType: 'boundary',
            elementType: 'geometry',
            stylers: {
              color: '#064f85'
            }
          }, {
            featureType: 'railway',
            elementType: 'all',
            stylers: {
              visibility: 'off'
            }
          }, {
            featureType: 'highway',
            elementType: 'geometry',
            stylers: {
              color: '#004981'
            }
          }, {
            featureType: 'highway',
            elementType: 'geometry.fill',
            stylers: {
              color: '#005b96',
              lightness: 1
            }
          }, {
            featureType: 'highway',
            elementType: 'labels',
            stylers: {
              visibility: 'on'
            }
          }, {
            featureType: 'arterial',
            elementType: 'geometry',
            stylers: {
              color: '#004981',
              lightness: -39
            }
          }, {
            featureType: 'arterial',
            elementType: 'geometry.fill',
            stylers: {
              color: '#00508b'
            }
          }, {
            featureType: 'poi',
            elementType: 'all',
            stylers: {
              visibility: 'off'
            }
          }, {
            featureType: 'green',
            elementType: 'all',
            stylers: {
              color: '#056197',
              visibility: 'off'
            }
          }, {
            featureType: 'subway',
            elementType: 'all',
            stylers: {
              visibility: 'off'
            }
          }, {
            featureType: 'manmade',
            elementType: 'all',
            stylers: {
              visibility: 'off'
            }
          }, {
            featureType: 'local',
            elementType: 'all',
            stylers: {
              visibility: 'off'
            }
          }, {
            featureType: 'arterial',
            elementType: 'labels',
            stylers: {
              visibility: 'off'
            }
          }, {
            featureType: 'boundary',
            elementType: 'geometry.fill',
            stylers: {
              color: '#029fd4'
            }
          }, {
            featureType: 'building',
            elementType: 'all',
            stylers: {
              color: '#1a5787'
            }
          }, {
            featureType: 'label',
            elementType: 'all',
            stylers: {
              visibility: 'off'
            }
          }, {
            featureType: 'poi',
            elementType: 'labels.text.fill',
            stylers: {
              color: '#ffffff'
            }
          }, {
            featureType: 'poi',
            elementType: 'labels.text.stroke',
            stylers: {
              color: '#1e1c1c'
            }
          }, {
            featureType: 'administrative',
            elementType: 'labels',
            stylers: {
              visibility: 'on'
            }
          }, {
            featureType: 'road',
            elementType: 'labels',
            stylers: {
              visibility: 'off'
            }
          }]

        }
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.bmap {
  height: 100%;
  width: 100%;
}
</style>