需求:
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;
}