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

最新推荐文章于 2024-04-29 04:20:22 发布

鲸渔

最新推荐文章于 2024-04-29 04:20:22 发布

阅读量1.1k

点赞数

分类专栏：【地图开发】文章标签： javascript 前端 html

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

版权

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

16 篇文章 11 订阅

订阅专栏

在使用地图开发时相信用的最多的就是点，其中难免需要使用到自定义图片的点。
而且点还要具备，可点击，可携带数据等功能。

点的绘制

绘制带图片的点常见的方式有四种

AMap.Marker ：使用地图 JS API中的marker，通过其icon属性指定图片链接
- 特点：绘制简单，对图片无要求，可批量管理。
Loca.IconLayer：使用Loca 数据可视化
- 特点：绘制简单，对图片无要求，可批量管理。
- 缺点：点重叠，点击事件触发重叠后下面的点，而不是最上面的点，需要额外引入loca
SimpleMarker：使用AMapUI 组件库，该对象继承于AMap.Marker，功能类似
- 特点：对图片无要求，可批量管理。
- 缺点：需要额外引入
AMap.Object3D.RoundPoints：使用3d地图绘制圆点，然后填充纹理（不进行讲解了，不推荐使用）
- 特点：无高度
- 缺点：操作复杂，对图片有要求，点击事件需要计算，不可携带数据。

AMap.Marker

本章针对AMap.Marker进行讲解。
因为AMap.Marker有高度，在使用3d地图的时候，如果图片太小，会有一种悬浮在空中的效果。这时候要么把图片放大，要么把图片放在水滴图中。

直接上代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>图标点标记</title>
    <style>
      html,
      body,
      #container {
        height: 100%;
        width: 100%;
        margin: 0px;
      }
      .amap-icon img {
        width: 25px;
        height: 34px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      window._AMapSecurityConfig = {
        securityJsCode: "xxxx",
      };
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=cccc"
    ></script>
    <script type="text/javascript">
      // 创建地图实例
      var map = new AMap.Map("container", {
        zoom: 13,
        center: [116.4, 39.92],
        resizeEnable: true,
        viewMode: "3D",
      });

      // 创建一个 Icon
      var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(32, 24),
        // 图标的取图地址
        image:
          "https://a.amap.com/Loca/static/manual/weathers/blizard.png",
        // 图标所用图片大小
        imageSize: new AMap.Size(32, 24),
      });

      // 将 icon 传入 marker
      var startMarker = new AMap.Marker({
        // 点的坐标
        position: [116.35, 39.89],
        // 指定点的icon，也可以是个url ，但这样就不能对图片进行设置了
        icon: startIcon,
        //启用点击事件 如果需要点击事件，必须开启
        clickable: true,
        //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
        extData: "222",
      });
      // 可以调用setExtData（）设置自定义属性
      //startMarker.setExtData('222')
      
      // 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
      let group = new AMap.OverlayGroup();
      //将组 挂载到地图上
      group.setMap(map);
      //将需要批量控制的点放到一个组中，通过控制组，就可以操作组内所有所有覆盖物
      group.addOverlay(startMarker);
      group.on("click", function (e) {
        //e.target触发事件的点对象
        console.log(e.target);
        //拿到点中携带的数据
        console.log(e.target.getExtData());
      });
    </script>
  </body>
</html>

在这里插入图片描述

从上图可以看出，正确的打印出了点的信息，以及点携带的数据，批量操作
该例中只演示了一个点，group可以存放多个点。
marker 中的 extData 用来携带额外的数据，通常点击 ‘点’ 之后，需要从点中拿到数据并发送请求。获取其他的数据。（也可以使用setExtData（）添加数据，getExtData( )获取数据）
图中可能不太明显,实际图标离地面还有些距离，如果切换地图视角，点的位置会显得不是很准确