在echart的map上把symbol替換成gif通過convertToPixel坐標轉換成px定位到頁面，沒有做echart的縮放情況下

1.dom

<!-- 地圖 -->
      <div class="map">
        <chart class="map-chart" ref="worldMap" auto-resize :options="mapOption" style="width: 100%;height: 100%; margin:auto"></chart>
        <div class="map-position" @click="getProvienceNum(centerPsition.name)" :style="{top: centerPsition.top, left: centerPsition.left}">
          <span>{{centerPsition.name}}</span>
          <img src="/static/gif/center.gif" alt="">
          <div class="ripple" ></div>
        </div>
        <div class="map-position" v-for="(item, index) in allIconPosition" :key="index+'a'" :style="{top: item.top, left: item.left}" @click="getProvienceNum(item.name)" >
          <span>{{item.name}}</span>
          <img src="/static/gif/position.gif" alt="">
          <div class="ripple wave-ellipse" ></div>
        </div>
      </div>

2.data： mapOption根據echart官網即可得到

      centerPsition: {}, // 中心位置
      allIconPosition: [], // 所有的位置
     geoCoordMap: { // 每個地區的經緯度
        '四川': [104.04, 30.40],
        '北京': [116.4551, 40.2539],
        '廣西': [108.19, 22.48],
        '湖南': [112.59, 28.12],
        '福建': [119.18, 26.05],
        '湖北': [114.17, 30.35],
        '山東': [117.00, 36.40],
        '上海': [121.4648, 31.2891],
        '江蘇': [118.46, 32.03]
      },
      BJData: [ // 每個地區的連線
        [{name: '北京'}, {name: '山東', value: 140}],
        [{name: '四川'}, {name: '山東', value: 140}],
        [{name: '廣西'}, {name: '山東', value: 140}],
        [{name: '湖南'}, {name: '山東', value: 140}],
        [{name: '福建'}, {name: '山東', value: 140}],
        [{name: '湖北'}, {name: '山東', value: 140}],
        [{name: '上海'}, {name: '山東', value: 140}]
        // [{name: '山東'}, {name: '山東', value: 140}]
      ]

3.js

    // 每個圖形的定位
    getPicPosition () {
      let BJData = this.BJData // 地區連線
      let geoCoordMap = this.geoCoordMap // 所有地區經緯度
      let myechart = this.$refs.worldMap
      let newArr = []
      if (myechart) {
        for (let item of BJData) {
          let result = myechart.convertToPixel('geo', geoCoordMap[item[0].name])
          let name = item[0].name
          let left = result[0] - 13 + 'px'
          let top = result[1] - 6 + 'px'
          newArr.push({
            name,
            left,
            top
          })
        }
        this.allIconPosition = newArr
        let result = myechart.convertToPixel('geo', geoCoordMap[BJData[0][1].name])
        this.centerPsition = {name: BJData[0][1].name, left: result[0] - 13 + 'px', top: result[1] - 6 + 'px'}
      }
    }
  },

　4.圖

 

 世界地圖包含中國地圖的json代碼太長了，沒貼，准備弄個資源供下載。