某省份地图+点位标注+点位信息展示

成品展示：

组件代码： 

<template>
  <div class="map-container">
    <div ref="mapContainer" class="mapContainer"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import shanxi from "@/assets/json/shanxi.json";
import biaodianPng from "@/assets/img/map-biao.png";
import labelBg from "@/assets/img/label-bg.png";
import normalImg from "@/assets/img/zhengchang.png";
import faultImg from "@/assets/img/guzhang.png";

export default {
  name: "MapComponent",
  components: {},
  props: {
    list: Array,
  },
  data() {
    return {
      mapInstance: null,
      currentProvince: "shanxi", // 初始省份为陕西省
      name: "",
      colors: [
        "#46D500",
        "#FF2D68",
        "#FF3C2D",
        "#4462C5",
        "#FFD885",
        "#013A4A",
        "#EB9711",
        "#956601",
        "#004308",
        "#008FB8",
        "#00830C",
        "#0051F7",
        "#030EE8",
      ],
    };
  },
  mounted() {
    this.initMap();
  },
  //销毁
  beforeDestroy() {
    // 销毁echarts实例
    if (this.mapInstance) {
      this.mapInstance.dispose();
    }
  },
  methods: {
    initMap() {
      this.getOptions();
    },
    getOptions() {
      this.mapInstance = echarts.init(this.$refs.mapContainer);
      // 加载地理数据
      echarts.registerMap("area", shanxi);

      // 标点数据信息
      const data = [
        {
          name: "城墙",
          value: 200,
          lat: 34.263161,
          lon: 108.948024,
          info: "西安信息",
        },
        {
          name: "华清池",
          value: 180,
          lat: 34.369315,
          lon: 107.14487,
          info: "宝鸡信息",
        },
        {
          name: "兵马俑",
          value: 150,
          lat: 34.32932,
          lon: 108.70929,
          info: "咸阳信息",
        },
        {
          name: "欢乐谷",
          value: 120,
          lat: 34.49997,
          lon: 109.50979,
          info: "渭南信息",
        },
        {
          name: "袁家村",
          value: 100,
          lat: 33.07767,
          lon: 107.02862,
          info: "汉中信息",
        },
      ];

      // 转换数据为带坐标的格式
      const convertData = (data) => {
        return data.map((item) => {
          return {
            name: item.name,
            value: [item.lon, item.lat, item.value],
            info: item.info,
          };
        });
      };
      console.log(convertData(data));

      const option = {
        tooltip: {
          show: false,
          trigger: "item",
          formatter: function (params) {
            console.log(params);

            return `${params.name}<br/>监控数量: ${params.value[2]}`;
          },
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "1%",
          bottom: "1%",
          show: true,
          backgroundColor: "transparent",
          borderColor: "transparent",
        },
        // 地图的阴影底图
        geo: {
          map: "area",
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          aspectScale: 0.9,
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: "126%",
          itemStyle: {
            normal: {
              shadowColor: "rgba(0,228,242,0.5)",
              shadowBlur: 5,
              color: "#082A52",
            },
            emphasis: {
              areaColor: "#082A52",
            },
          },
          z: 2,
        },
        series: [
          {
            type: "map",
            map: "area",
            tooltip: { show: false },
            // silent: true, // 禁用该 series 的所有事件
            aspectScale: 0.9,
            layoutCenter: ["50%", "49%"], //地图位置
            layoutSize: "126%",
            label: {
              normal: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "14",
                color: "#FEFEFE",
              },
              emphasis: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "14",
                color: "#FEFEFE",
              },
            },
            // tooltip:{} tooltip可结合formatter、div、css实现样式
            itemStyle: {
              normal: {
                borderColor: "rgba(0,0,0, 0.6)",
                borderWidth: 0.8,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#0a56BC", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#12A6F2",
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
              emphasis: {
                shadowColor: "rgba(0, 0, 0, 1)",
                shadowBlur: 10,
                shadowOffsetX: 5,
                shadowOffsetY: 5,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F5B615", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#E27B0d",
                    },
                  ],
                },
              },
            },
            zlevel: 1,
            data: [],
          },
          {
            name: "点位",
            type: "scatter",
            coordinateSystem: "geo",
            silent: true, // 禁用该 series 的所有事件
            data: convertData(data),
            symbol: `image://${biaodianPng}`, // 使用图片作为标记点
            symbolSize: [70, 70], // 调整图片大小
            zlevel: 3,
            symbolSize: 60,
            label: {
              show: true,
              position: "right", // 设置展示框位置在图标的右侧
              offset: [-20, 15],
              formatter: (params) => {
                // 假设某一条件 (params.value[2] > 100) 下，name 后添加图标
                let icon = params.value[2] > 100 ? "{icon1|}" : "{icon2|}";
                return `{b|${params.name}}{space| }{space| }{space| }{space| }{space| }{space| }{space| }${icon}\n\n监控数量: {a|${params.value[2]}}`;
              }, // 展示点的值
              rich: {
                b: {
                  fontWeight: "bold", // 加粗样式
                  fontSize: 14, // 设置字体大小
                  color: "#000", // 设置字体颜色
                },
                a: {
                  fontWeight: "bold", // 加粗样式
                  fontSize: 15, // 设置字体大小
                  color: "#000", // 设置字体颜色
                },
                icon1: {
                  height: 13, // 图标高度
                  backgroundColor: { image: normalImg }, // 条件满足时的图标
                },
                icon2: {
                  height: 13,
                  backgroundColor: { image: faultImg }, // 条件不满足时的图标
                },
              },
              color: "#000", // 文字颜色
              backgroundColor: {
                image: labelBg, // 使用背景图片，替换为图片的实际路径
              }, // 背景颜色
              padding: [14, 16], // 内边距
              borderRadius: 4, // 圆角
              //   borderColor: "#333", // 边框颜色
              //   borderWidth: 1, // 边框宽度
              fontSize: 12, // 字体大小
            },
            // itemStyle: {
            //   color: "red",
            // },
          },
        ],
      };
      // 初始化地图
      this.mapInstance.setOption(option);
    },
  },
};
</script>

<style scoped lang="less">
/* 样式可以根据需要进行调整 */

/deep/ .props {
  width: 171px;
  height: 179px;
  background: linear-gradient(268deg, #1c355582 100%, #1c35556b 100%);
  position: absolute;
  border-radius: 0.2vw;
  z-index: 999;
}

/deep/ .props::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -57px;
  width: 60px;
  height: 70px;
  background: url("../assets/img/map-biao.png");
  background-size: 100%;
}

/deep/ .props-title {
  background: linear-gradient(268deg, #3268a8 0%, #8aaddd 100%);
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  line-height: 34px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  width: 171px;
  height: 41px;
}

/deep/ .props-content {
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding: 10px;

  div {
    padding-top: 5px;
  }
}

.map-container {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;

  //background: url("../assets/image/guangquan.png")  no-repeat;
  //background-size: 98% 99%;
  //background-position: 135% 252%;

  .mapContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
  }
}
</style>

组件中引用图：

地图json文件可以自己找需要用到的省份json文件替换