高德地图JS API，添加多个不同层级的覆盖物点标记，使用本地图片作为点标记icon

添加多个点标记，不同级别，下面是label隐藏时效果

不同层级点标记（本地icon）代码：

//Vue3
<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
import { onMounted } from "vue";
window._AMapSecurityConfig = {
  securityJsCode: "「申请的安全密钥」", 
};
var map = shallowRef(null);
//本地图标引入
import redMarker from "@/assets/icons/png/redMarker.png";
import greenMarker from "@/assets/icons/png/greenMarker.png";
import blueMarker from "@/assets/icons/png/blueMarker.png";
var initAMap = () => {
  var opts = {
    subdistrict: 0,
    extensions: "all",
    level: "city",
  };
  AMapLoader.load({
    key: "myKey", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.Marker",
      "AMap.DistrictSearch",
      "AMap.Object3DLayer",
      "AMap.Object3D",
      "AMap.Icon",
      "AMap.MassMarks",
      // "AMap.createDefaultLayer",
    ], // 需要使用的的插件列表
  })
    .then((AMap) => {
      var district = new AMap.DistrictSearch(opts);
      district.search("中华人民共和国", function (status, result) {
        var bounds = result.districtList[0].boundaries;
        var mask = [];
        for (var i = 0; i < bounds.length; i += 1) {
          mask.push([bounds[i]]);
        }
        map = new AMap.Map("amapcontainer", {
          mask: mask,
          center: [102.602725, 34.076636],
          disableSocket: true,
          viewMode: "3D",
          showLabel: false,
          labelzIndex: 130,
          pitch: 30,
          zoom: 4.6,
          zoomEnable: false, // 地图是否可缩放，默认值为true
          dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true
          doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
          mapStyle: "自定义地图样式",
        });
        //添加描边
        for (var i = 0; i < bounds.length; i += 1) {
          new AMap.Polyline({
            path: bounds[i],
            strokeColor: "#8EECFF",
            strokeWeight: 4,
            map: map,
          });
        }
        //添加标记
        //红色标记,一级
        var redIcon = new AMap.Icon({
          size: new AMap.Size(22, 30), // 图标尺寸
          image: redMarker, // Icon的图像，本地图标Vue引入
          // imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(22, 30), // 根据所设置的大小拉伸或压缩图片
        });
        const markerRed = new AMap.Marker({
          position: new AMap.LngLat(116.39, 39.9),
          // offset: new AMap.Pixel(-10, -10),
          icon: redIcon,
          label: {
            content: "<div class='info'>北京科技股份有限公司</div>",
            offset: new AMap.Pixel(-6, -30),
            direction: "center",
          },
        });
        map.add(markerRed);
        //绿色标记，二级
        var greenIcon = new AMap.Icon({
          size: new AMap.Size(18, 24),
          image: greenMarker,
          imageSize: new AMap.Size(18, 24),
        });
        var markerGreenList = [
          {
            position: new AMap.LngLat(119.19, 35.2),
            content:
              "<div class='info'>淮坊智能装备研究院有限公司</div>",
          },
          {
            position: new AMap.LngLat(118.59, 33.2),
            content:
              "<div class='info'>淮安智能网联创究院科技有限公司</div>",
          },
        ];
        //遍历添加Marker和Marker移入移除事件
        for (let green of markerGreenList) {
          let markerGreen = new AMap.Marker({
            position: green.position,
            icon: greenIcon,
            label: {
              content: green.content,
              offset: new AMap.Pixel(-8, -30),
              direction: "center",
            },
          });
          map.add(markerGreen);
          markerGreen.on("mouseover", showMarkerLabel);
          markerGreen.on("mouseout", hideMarkerLabel);
        }
        //蓝色标记，三级和二级同理
        var blueIcon = new AMap.Icon({
          size: new AMap.Size(11, 13),
          image: blueMarker,
          imageSize: new AMap.Size(11, 13),
        });
        var markerBlueList = [
          {
            position: new AMap.LngLat(120.09, 31.53),
            content: "<div class='info'>昆山技术有限公司</div>",
          },
          {
            position: new AMap.LngLat(116.44, 38.62),
            content:
              "<div class='info'>超媒体信息技术有限公司</div>",
          },
      
        ];
        for (let blue of markerBlueList) {
          let markerBlue = new AMap.Marker({
            position: blue.position,
            icon: blueIcon,
            label: {
              offset: new AMap.Pixel(-6, -27),
              direction: "center",
              content: blue.content,
            },
          });
          map.add(markerBlue);
          markerBlue.on("mouseover", showMarkerLabel);
          markerBlue.on("mouseout", hideMarkerLabel);
        }
        markerRed.on("mouseover", showMarkerLabel);
        markerRed.on("mouseout", hideMarkerLabel);
      });
    })
    .catch((e) => {
      console.log(e);
    });
};
onMounted(() => {
  initAMap();
});
</script>

自定义地图可以查看高德地图JS API自定义地图只显示中国地图_shsyzhzhgn的博客-CSDN博客

点标记自定义图标可以查看自定义图标-点标记-示例中心-JS API 示例 | 高德地图API