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（全国省市县/区的经纬度、全国地级市的经纬度）