echarts 地图配置(以四川省地图为例)

1.引入 import China from '@/utils/echarts/china-map-geojson.min'

2.引入import '@/utils/echarts/sichuan'

 3.this.$echarts.registerMap('china', China.ChinaData)

 const geoCoordMap = {

      甘孜藏族自治州: [99.9207, 31.0803],

      阿坝藏族羌族自治州: [102.4805, 32.4536],

      凉山彝族自治州: [101.9641, 27.6746],

      凉山彝族自治州1: [102.1111, 28.6746],

      绵阳市: [104.7327, 31.8713],

      达州市: [107.6111, 31.333],

      广元市: [105.6885, 32.2284],

      雅安市: [102.6672, 29.8938],

      宜宾市: [104.6558, 28.548],

      乐山市: [103.5791, 29.1742],

      南充市: [106.2048, 31.1517],

      巴中市: [107.0618, 31.9977],

      泸州市: [105.4578, 28.493],

      成都市: [103.9526, 30.7617],

      资阳市: [104.9744, 30.1575],

      攀枝花市: [101.6895, 26.7133],

      眉山市: [103.8098, 30.0146],

      广安市: [106.6333, 30.4376],

      德阳市: [104.48, 31.1133],

      内江市: [104.8535, 29.6136],

      遂宁市: [105.5347, 30.6683],

      自贡市: [104.6667, 29.2786]

    }

    const mapData = [

 { name: '资阳市', value: 5 },

  { name: '乐山市', value: 6 },

  { name: '成都市', value: 7 },

  { name: '雅安市', value: 9 },

  { name: '阿坝藏族羌族自治州', value: 10 },

  { name: '凉山彝族自治州', value: 11 },

  { name: '凉山彝族自治州1', value: 12 }

    ]

    const convertData = function(data) {

      var res = []

      for (var i = 0 i < data.length i++) {

        var geoCoord = geoCoordMap[data[i].name]

        if (geoCoord) {

          res.push({

            name: data[i].name,

            value: geoCoord.concat(data[i].value),

            selected: true //点击事件

          })

        }

      }

      return res

    }

    const option = {

      geo: {

        map: '四川',

        itemStyle: {

          areaColor: '#e8f5fe',

          borderColor: '#1c85f6'

        },

        emphasis: {

          itemStyle: {

            areaColor: 'lightblue',

            shadowColor: '#fff',

            shadowBlur: 10

          },

          label: {

            show: false

          }

        }

      },

      series: [

        {

          name: '666',

          type: 'scatter',

          coordinateSystem: 'geo',

          symbol: 'pin',

          symbolSize: [20, 20],

          label: {

            normal: {

              show: true,

              textStyle: {

                color: '#2cdee5',

                fontSize: 12

              },

              position: 'bottom',

              formatter(value) {

                return value.data.value[2]

              }

            }

          },

          itemStyle: {

            normal: {

              color: '#2cdee5'

            }

          },

          data: convertData(

            mapData

          ),

          showEffectOn: 'render',

          rippleEffect: {

            brushType: 'stroke'

          },

          hoverAnimation: true,

          zlevel: 1

        }

      ]

    }

效果图:

具体 *** 作步骤如下：

1）首先打开百度地图，点击工具；

2）在工具中找到测距，点击，出现你当时所在的地图，同时你也可以进行缩放选择点击你想查找的起始地点；

3）再点击另外一个你想去的地点，点击后就出现路程。测距就已经结束了。

---