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

最新推荐文章于 2025-03-25 15:25:14 发布

鲸渔

最新推荐文章于 2025-03-25 15:25:14 发布

阅读量903

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/qq_39078783/article/details/122339587

版权

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

16 篇文章

订阅专栏

上一章讲述了AMap.Marker，这一章使用第二种方式Loca来绘制带图片的点。
经过测试，该api 在点击事件上有些问题。如果你的点会有重叠的可能，请谨慎使用该api。

代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>IconLayer 天气预报</title>
    <style>
      html,
      body,
      #container {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    window._AMapSecurityConfig = {
      securityJsCode: "xxxx",
    };
  </script>
  <script
    language="javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=cccc"
  ></script>
  <!-- 一定要引入 -->
  <script
    language="javascript"
    src="https://webapi.amap.com/loca?v=1.3.2&key=cccc"
  ></script>
  <script>
    //设置点的数据 通常都是通过http请求获取，数据的key是任意的，也可以携带其他任意数据，每一个元素就是一个点，
    //通过点击事件，可以获取点对应的数组元素对象。借此可以实现点携带额外数据的功能
    var districts = [
      {
        name: "北京市",
        center: "116.407394,39.904211",
        icon: "https://a.amap.com/Loca/static/manual/weathers/cloudy.png",
      },
      {
        name: "天津市",
        center: "116.407394,40",
        icon: "https://a.amap.com/Loca/static/manual/weathers/blizard.png",
      },
    ];
   
    // 创建地图实例
    var map = new AMap.Map("container", {
      showIndoorMap: false,
      viewMode: "3D",
      center:[116.407394,39.904211],
      resizeEnable: true,
      showLabel:false
    });
    //创建layer
    var layer = new Loca.IconLayer({
      //挂载到地图
      map: map,
      //开启事件支持，需要点击事件，必须设置为true
      eventSupport: true
    });
    //给layer设置数据
    // 第一个参数是点位的对象数组，第二个参数指定第一个参数中的对象中哪个key是坐标数据
    layer.setData(districts, {
      //设置key 这样就会把districts中的每个元素的center作为点坐标数据
      lnglat: "center",
    });
    //设置点的样式
    layer.setOptions({
      //用于指定图片的路径、base64URI 或者 Image DOM 对象
      source: function (res) {
        //res 是 遍历 districts 中的当前元素
        var i = res.index;
        // return 当前遍历到的点的图片 districts中的icon是图片的url ，当然你可以使用其他方式，总之返回什么 点就显示什么
        return res.value.icon;
      },
      // 设置点的样式 
      style: {
        size: 28,
        //透明度
        opacity: 0.9,
      },
    });
    layer.on("click", function (ev) {
      console.log("点位", ev);
    });
    // 渲染
    layer.render();
  </script>
</html>

在这里插入图片描述

每一个layer中都可以存放多个点，通过layer可以控制点的显隐点击事件等。
但是有个bug，layer是通过遍历的方式将点渲染到地图上，也就是说如果点坐标相同，后渲染的点会盖住先渲染的点，但是点击事件的触发，他是通过地图的点击事件获取点击的坐标，通过这个坐标遍历点数组判断是否点击到了layer中的点，但它并不是从数组的尾向头遍历，这就导致触发了先渲染的点的点击事件。从视觉上看点击的是最上面的点，触发的却是最下面的点的点击事件