高德地图关于点标记的一些实现

需求：

1、引用高德地图根据设备坐标点放置设计的icon,点击该标记时标记样式改变（变大）；

2、当后端推送设备消息时，地图出现信息弹框并且该设备点要出现缩放动画效果；

实现方法

需求一

1.首先初始化地图

var map = new AMap.Map('container', {
  mapStyle: '自己的自定义样式的路径', //设置地图的显示样式
  center: [118.85,30.48],
  resizeEnable: true,
  expandZoomRange:true,
  zoom: 11,
  zooms:[8,20],//限制地图缩放层级
  rotation: 0
});

2.渲染设备点

3.在渲染的设备点上添加点击事件

根据接口返回的类型 状态判断展示不同设备的不同状态（dom指的是接口返回的其中一条数据）

$.each('接口返回的数据',function(i,dom){
    var markers=[];
    var markerContent = '';
    if(dom.type==1){
      if(dom.status==1){
        markerContent = '<div class="green-marker device5"></div>';
      }else if(dom.status==3||dom.status==4){
        markerContent = '<div class="red-marker device5"></div>';
      }else if(dom.status==2){
        markerContent = '<div class="gray-marker device5"></div>';
      }
    }
    var marker = new AMap.Marker({
      position:[dom.longitude,dom.latitude],//点标记展示的位置
      // 将 html 传给 content
      content: markerContent,
      // 以 icon 的 [center bottom] 为原点
      offset: new AMap.Pixel(-13, -30)
    });
    marker.deviceId=dom.id;
    marker.type=dom.type;
    marker.status=dom.status;
    // 将 markers 添加到地图
    map.add(marker);
    markers.push(marker);

//3.在渲染的设备点上添加点击事件

    marker.on('click', function (e) {
    //点击图标放大
    var clickIcon='';
    var closeIcon='';
    if(dom.type==1){
      if(dom.status==1){
        clickIcon = '<div class="green-marker device5 big-icon"></div>';//添加一个放大图标的样式
        closeIcon = '<div class="green-marker device5"></div>';
      }else if(dom.status==3||dom.status==4){
        clickIcon = '<div class="red-marker device5 big-icon"></div>';
        closeIcon = '<div class="red-marker device5"></div>';
      }else if(dom.status==2){
        clickIcon = '<div class="gray-marker device5 big-icon"></div>';
        closeIcon = '<div class="gray-marker device5"></div>';
      }
    }
    e.target.setContent(clickIcon);//改变当前点击标记的样式
    //监听自定义窗体关闭事件
    infoWindow.on('close',function () {
      e.target.setContent(closeIcon);//当弹框关闭的时候再恢复原来的样式
    })
  })
})

 

需求二

第一步和第二步同需求一

3.接收到消息后进行动画样式添加

that.socket.onmessage = function(msg) {
  var res=JSON.parse(msg.data);
//遍历之前保存在markers里的数据 通过对比唯一值来判断是哪一个设备；再进行下一步处理
  markers.forEach(function (v,i) {
    if(v.deviceId==res.devId){
      //点击图标放大
      var hoverIcon='';
      var closeIcon='';
      if(v.type==1){
        if(v.status==1){
          hoverIcon = '<div class="green-marker device5 hover-icon"></div>';//添加缩放动画样式
          closeIcon = '<div class="green-marker device5"></div>';
        }else if(v.status==3||v.status==4){
          hoverIcon = '<div class="red-marker device5 hover-icon"></div>';
          closeIcon = '<div class="red-marker device5"></div>';
        }else if(v.status==2){
          hoverIcon = '<div class="gray-marker device5 hover-icon"></div>';
          closeIcon = '<div class="gray-marker device5"></div>';
        }
     }
     markers[i].setContent(hoverIcon);
     setTimeout(function () {
      markers[i].setContent(closeIcon);
     },6*1000)
   }
 })
}

下面是点标记的一些样式

#container{
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left: 0;
  }
  .big-icon{
    transform: scale(1.2);
  }
  .hover-icon{
    animation:mymove 5s infinite;
  }
  @keyframes mymove
  {
    0%{
      transform: scale(1);  /*开始为原始大小*/
    }
    25%{
      transform: scale(1.5); /*放大1.5倍*/
    }
    50%{
      transform: scale(1);
    }
    75%{
      transform: scale(1.5);
    }
  }
  .green-marker{
    width: 0.3rem;
    height: 0.3rem;
    background-color: #0096FF;
    border-radius: 50%;
  } 
.red-marker{
    width: 0.3rem;
    height: 0.3rem;
    background-color: #D32E2E;
    border-radius: 50%;
  }
  .gray-marker{
    width: 0.3rem;
    height: 0.3rem;
    background-color: #92A5B1;
    border-radius: 50%;
  }
  .device1{
    background-image: url("../assets/image/device1.svg");
    background-repeat: no-repeat;
    background-size: 0.18rem 0.18rem;
    background-position: center;
  }