【高德地图进阶】--- 带图片的点（3）

最新推荐文章于 2023-10-21 21:25:13 发布

鲸渔

最新推荐文章于 2023-10-21 21:25:13 发布

阅读量841

点赞数 1

分类专栏：【地图开发】文章标签： javascript ui jquery

本文链接：https://blog.csdn.net/qq_39078783/article/details/122343263

版权

高德地图 AMapUI SimpleMarker 自定义图标地图标记

关键词由CSDN通过智能技术生成

【地图开发】专栏收录该内容

16 篇文章 11 订阅

订阅专栏

SimpleMarker本身继承了AMap.Marker ，所以使用起来并不难，只需要额外引入组件库，用法和marker差不多。

1、引入UI组件库

<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

2、加载 SimpleMarker（模块名：ui/overlay/SimpleMarker）

AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
    //使用SimpleMarker
    
});

全部代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>自定义图标</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0px;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      window._AMapSecurityConfig = {
        securityJsCode: "xxxx",
      };
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=2.0&key=cccc"
    ></script>
    <!-- UI组件库 1.0 -->
    <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script type="text/javascript">
      //创建地图
      var map = new AMap.Map("container", {
        zoom: 4,
        center: [116.407394, 39.904221],
        viewMode: "3D",
      });

      AMapUI.loadUI(["overlay/SimpleMarker"], function (SimpleMarker) {
        //创建SimpleMarker
        let sss = new SimpleMarker({
          //img节点的属性值，比如 src,style,width,height等
          iconStyle: {
            src: "https://a.amap.com/Loca/static/manual/weathers/cloudy.png",
            style: {
              width: "20px",
            },
          },
          // 点 自定义属性 ，携带自定义数据
          extData: "1111",
          position: [116.407394, 40],
          offset: AMap.Pixel(0, 0),
        });
        let sss1 = new SimpleMarker({
          //自定义图标地址
          iconStyle: {
            src: "https://a.amap.com/Loca/static/manual/weathers/blizard.png",
            style: {
              width: "20px",
            },
          },
          //添加图标前景文字
          //iconLabel:'aaa',
          // 点 自定义属性 ，携带自定义数据
          extData: "2222",
          position: [116.407394, 39.904221],
          //设置偏移量
          offset: AMap.Pixel(0, 0),
        });

        //为点单独设置点击事件，使用组就不需要了
        // sss.on("click", function (e) {
        //   console.log("2222", e);
        // });

        let group = new AMap.OverlayGroup();
        //先调用setMap 在调用addOverlay 
        group.setMap(map);
        group.addOverlay(sss);
        group.addOverlay(sss1);
        group.on("click", function (e) {
          console.log("group", e.target.getExtData());
        });
      });
    </script>
  </body>
</html>

查看效果

在这里插入图片描述

这里面需要注意的是，在使用group组时，setMap（）要在 group.addOverlay();之前调用。不然会出现点无法绘制到地图上的情况

可能有人会问，既然有了marker为什么还要用这个，simpleMarker对Marker进行了加强，主要特征如下：

支持设置背景图标（iconTheme，iconStyle）和前景文字（iconLabel）；背景图标内置若干样式可供挑选，也支持自定义图片地址或者Dom结构。
支持显示定位点，默认用红点标识，红点的中心即是经纬度（即position）对应的位置。用于开发阶段，辅助开发者设置Marker图标相对于经纬度的显示偏移量。（即Marker的offset参数）

在这里插入图片描述