vue中使用echarts，顯示某個省的地圖，且根據后台返回經緯度在地圖上顯示自定義圖標

實現效果：

如上所示，顯示的是貴州省的地圖，且分為三種圖標，表示的是三種不同類型，根據經緯度顯示具體位置。

 

實現代碼：

1.html:

<div id="distributionDiv"></div>

2.js：

引入三個圖片，引入貴州省的一個json文件，這個自己百度即可，使用json文件注冊貴州省地圖。

import vueEcharts from 'echarts';
import zaixian from "@/assets/images/homeIcon/zaixian.png";
import shangxian from "@/assets/images/homeIcon/shangxian.png";
import lixian from "@/assets/images/homeIcon/lixian.png";
// 注冊貴州省地圖
const guizhouJson = require("@/assets/json/guizhou.json");
vueEcharts.registerMap("guizhou", guizhouJson);　　

3.options：

包含三步：獲取經緯度數據，可以到時候請求后台數據；顯示自定義圖標；options配置。

然后獲取到對應的div元素，給他設置option，設置自適應。

getDistributionOptions(){

  // 獲取經緯度數據
  const seriesList = [
    {
      image: zaixian,
      data: [
        {value: [106.9, 27.7]},
        {value: [105.29, 27.32]},
        {value: [106.04,27.03]},
        {value: [104.82,26.58]},
      ]
    },
    {
      image: shangxian,
      data: [
        {
          value: [107.43,28.56]
        },
      ]
    },
    {
      image: lixian,
      data: [
        {
          value: [107.5,27.76]
        }
      ]
    }
  ];
  
  // 自定義圖標
  const series = seriesList.map((v) => {
    return {
      type: "custom", //配置顯示方式為用戶自定義
      coordinateSystem: "geo",
      renderItem(params, api) {
        //具體實現自定義圖標的方法
        return {
          type: "image",
          style: {
            image: v.image,
            x: api.coord([
              v.data[params.dataIndex].value[0],
              v.data[params.dataIndex].value[1]
            ])[0],
            y: api.coord([
              v.data[params.dataIndex].value[0],
              v.data[params.dataIndex].value[1]
            ])[1],
            width: '29',
            height: '35',
          }
        };
      },
      data: v.data,
    };
  });
  
  // options
  const distributionOptions = {
    tooltip: {
      show: true,
      trigger: "item",
      triggerOn: "click",
      formatter: "名稱:{b}<br />坐標:{c}"
    },
    series,
    geo: {
      //引入貴州省的地圖
      map: "guizhou",
      label: {
        emphasis: {
          show: true
        }
      },
      layoutCenter: ["50%", "50%"], //設置后left/right/top/bottom等屬性無效
      layoutSize: "90%",
      roam: true, //開啟鼠標縮放和漫
      zoom: 2,
      label: {
        normal: { //靜態的時候展示樣式
          show: true, //是否顯示地圖省份得名稱
          textStyle: {
            color: "#fff",
            // fontSize: 10,
            fontFamily: "Arial"
          }
        },
        emphasis: { //動態展示的樣式
          color:'#fff',
        },
      },
      itemStyle: {
        normal: {
          borderColor: "#07919e",
          areaColor: '#1c2f59',
          textStyle: {
            color: "#fff"
          },
          shadowBlur: 10,
          shadowOffsetX: 10,
        },
        emphasis: {
          areaColor: "#1c2f59",
          color: "#fff"
        },
      },
    }
  };
  
  var myChart = vueEcharts.init(document.getElementById('distributionDiv'));
  myChart.setOption(distributionOptions);
  window.onresize = function(){
    myChart.resize();
  }
},　

4.mounted:

mounted(){
  this.getDistributionOptions();
},

一進來就執行該方法，加載地圖。

 

到現在基本上就可以了。

 

參考鏈接：

https://blog.csdn.net/weixin_30381793/article/details/99930705

https://blog.csdn.net/qq_42036203/article/details/103529566

https://gitee.com/wu_donte/P_C_D（全國省市縣/區的經緯度、全國地級市的經緯度）