添加多个标记,不同级别,下面是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

原文地址:https://blog.csdn.net/shsyzhzhgn/article/details/132260464

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_27980.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注