高德地图上添加marker，给每个marker添加点击事件。

最新推荐文章于 2024-07-31 11:00:11 发布

前端代码Copy工程师浩楠

最新推荐文章于 2024-07-31 11:00:11 发布

阅读量2.1w

点赞数 2

分类专栏： js 文章标签： js 高德地图

本文链接：https://blog.csdn.net/hhn_hn/article/details/98599249

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

高德地图上添加marker，给每个marker添加点击事件。

高德地图上添加marker，给每个marker添加点击事件。

var watch = []
    $.ajax({
      type: 'GET',
      dataType: 'jsonp',
      url:
        url +
        '你的url地址',
      error: function() {
        alert('获取监控点信息失败')
      },
      success: function(data) {
        var json = data.QueryUDCAMERAINFOResponse
        json = json.UDCAMERAINFOSet.UDCAMERA
        $.each(json, function(index, item) {
          if (json[index].LATITUDE && json[index].LONGITUDE) {
            // console.log(json[index])
            watch.push(json[index])
            // console.log(watch)
          }
        })
        watchMap(watch)
      }
    })
    function watchMap(list) {
      var watchList = []
      // 添加多个地图点标记
      for (let i = 0; i < list.length; i++) {
        var temp = new AMap.Marker({
          position: new AMap.LngLat(list[i].LONGITUDE, list[i].LATITUDE), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: list[i].NAME,
          map: map,
          icon: 'imgs/sxt.png',
          clickable: true
        })
        watchList.push(temp)
        // 给每个点标记注册点击事件
        AMap.event.addListener(temp, 'click', function(e) {
          $('#watch').hide(300)
          //得到的数据
          for (let j = 0; j < list.length; j++) {
            if (this.B.title == list[j].NAME) {
              // 点击摄像头标记，切换中心坐标
              map.setCenter([list[i].LONGITUDE, list[i].LATITUDE])
              var str =
                '<ul> <li><h2>设备信息</h2></li> <li>位置:&nbsp;&nbsp;' +
                list[j].NAME +
                '</li> <li>纬度:&nbsp;&nbsp;' +
                list[i].LATITUDE +
                '</li> <li>精度:&nbsp;&nbsp;' +
                list[i].LONGITUDE +
                '</li> <li>运行状态:&nbsp;&nbsp;正常</li> <li id="openMp4"><a href=' +
                'javascript:;' +
                '>点击查看</a></li><li><a href=' +
                'javascript:;' +
                '>资产台账</a></li> </ul><span id="closeWatch">×</span>'
              // 更改弹窗口
              $('#watch').html(str)
              $('#watch')
                .css({
                  left: '50%',
                  top: '50%'
                })
                .show(300)
              $('#closeWatch').click(function() {
                $('#watch').hide(300)
              })
              $('#openMp4').click(function() {
                $('.playerMp4')
                  .css({
                    height: $(window).height()
                  })
                  .show(300)
                $('.radio_top_title').html(list[j].NAME)
                $('#watch').hide(300)
              })
            }
          }
        })
      }
      // 将创建的点标记添加到已有的地图实例：
      map.add(watchList)
      // 利用styles属性修改点聚合的图标样式
      var styles = [
        {
          url: 'https://a.amap.com/jsapi_demos/static/images/blue.png',
          size: new AMap.Size(32, 32),
          offset: new AMap.Pixel(-16, -30)
        },
        {
          url: 'https://a.amap.com/jsapi_demos/static/images/green.png',
          size: new AMap.Size(36, 36),
          offset: new AMap.Pixel(-18, -18)
        },
        {
          url: 'https://a.amap.com/jsapi_demos/static/images/orange.png',
          size: new AMap.Size(48, 48),
          offset: new AMap.Pixel(-24, -45)
        }
      ]

      //添加聚合组件
      map.plugin(['AMap.MarkerClusterer'], function() {
        cluster = new AMap.MarkerClusterer(
          map, // 地图实例
          watchList, // 海量点组成的数组
          {
            styles: styles
          }
        )
      })