echarts+vue3.2 点击地图根据经纬度添加自定义图标

本文介绍: 把基础地图画出来，然后在地图上添加点击事件，拿到经纬度，根据经纬度的位置进行动态的添加图标。

实现思路：把基础地图画出来，然后在地图上添加点击事件，拿到经纬度，根据经纬度的位置进行动态的添加图标。

&lt;template&gt;
  &lt;div id="china-echart" style="height: 500px; width: 500px"&gt;&lt;/div&gt;
&lt;/template&gt;

&lt;script lang="ts" setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import * as echarts from "echarts";
import imgTest from "../../assets/image/icotu.png";

onMounted(() => {
 mapList()
});
const mapList = ()=>{
  let chartDom:any = document.getElementById("china-echart");
  let myChart = echarts.init(chartDom);
  let option;
  myChart.showLoading();
  axios.get("/geo/china-s.json").then((usaJson) => {
    myChart.hideLoading();
    echarts.registerMap("china", usaJson.data);
    //拼接自定义图标路径
    let symbolImg = 'image://'+ imgTest
     option = {
      geo: {
        map: 'china',
        roam: true,
        label:{
          normal:{
            show: true, //省份名称
            color: '#d9d6d6'
          }
        },
        itemStyle: {
          color: '#004981',   // 背景颜色
          borderColor: 'rgb(54,192,118)'   // 边框颜色
        }
      },
      series: [
        {
          type: 'effectScatter',   //  指明图表类型：带涟漪效果的散点图
          coordinateSystem: 'geo', //  指明绘制在geo坐标系上
          symbol: symbolImg, //自定义的展示图标
          symbolSize:50,
          //定以一个空数组后期点击的时候往里面添加新数据
          data:[]
        },
      ]
    };

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
  });
   //地图的点击事件
  myChart.on( 'click',function (e:any) {
    //拿到点击对应的经纬度
    let lagLog = myChart.convertFromPixel('geo', [e.event.offsetX, e.event.offsetY])
    //拿到点击区域对应的名字
    let title = e.name
    //把经纬度和name 存在一个对象中
    let myDataObj = {name:title,value:lagLog};
    //把拿到的myDataObj动态的添加到option里面series中data数据中
    if(option.series[0].data){
      option.series[0].data = []
      option.series[0].data.push(myDataObj)
      myChart.setOption(option);
    }else if(option.series[0].data.value == lagLog &amp;&amp; option.series[0].data) {
      option.series[0].data= []
      console.log( option.series[0].data)
      myChart.setOption(option);
    }else {
      option.series[0].data.push(myDataObj)
      myChart.setOption(option);
    }
  })
}
</script>