前言:最近做项目客户提了一个需求,就是要在高德地图上将设备用图标显示出来,并且可以移动设备来更改设备经纬度。
第一时间我就去查高德地图,结果发现高德地图的jsapi文档好坑,有一些功能藏在示例里面。搞得我烦死了,于是决定将这次的经历写下来与大家分享。
功能需求:
- 高德地图卫星地图与基础图层切换;
- 根据不同设备批量生成不同点标注显示于地图上;
- 点标注与信息窗口
- 拖拽点坐标,并且在拖拽完成后更新设备经纬度;
功能实现
图层切换这一功能高德的开发文档已经介绍的很详细。
layerCtrl = new BasicControl.LayerSwitcher({
// 控件位置
position: {
top:'8%',
right:'26%',
},
theme: 'dark',
//高德基础图层 enable: true:默认开启
baseLayers: [{
enable: true,
id: 'tile',
name: '图层A',
layer: new AMap.TileLayer(),
}, {
enable: true,
id: 'satellite',
name: '图层B',
layer: new AMap.TileLayer.Satellite(),
}],
//自定义覆盖图层
overlayLayers: [{
id: 'traffic',
name: '图层C',
layer: new AMap.TileLayer.Traffic()
}, {
enable: true,
id: 'roadNet',
name: '图层D',
layer: new AMap.TileLayer.RoadNet()
}]
});
点标注创建
var marker = new AMap.Marker({
position: new AMap.LngLat(vm.lng, vm.lat),
offset: new AMap.Pixel(-10, -10),
icon: '../statics/img/svg/dw.svg', // 添加 Icon 图标 URL
title: name,
map:map
});
//在指定位置打开信息窗体
var info = [];
info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>位置信息</h4>");
info.push("<p class='input-item'>name</p>");
info.push("<p class='input-item'>address</p></div></div>");
var oneInfo = new AMap.InfoWindow({
content: info.join("") //使用默认信息窗体框样式,显示信息内容
});
//鼠标点击marker弹出自定义的信息窗体
marker.on('click', function () {
oneInfo.open(map, marker.getPosition());
});
var Markers=[];
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, 0)});
function saveMarker(lnglat, id, type, devName) {
var iconImg = '';
if(type == 'arrest'){
iconImg = 'arrestDev.svg';
}else if(type == 'video'){
iconImg = 'svg';
}else if(type == 'carDev'){
iconImg = 'carDev.svg';
}else {
iconImg = 'doorDev.svg';
}
// 信息窗体
var devMarker = new AMap.Marker({
position: lnglat,
icon: iconImg ,
// 信息锚点
anchor:'top-center',
// 偏移量
offset: new AMap.Pixel(0, 0),
// 设置是否可以拖拽 pointer / move
draggable: false,
cursor: 'pointer',
map:map
});
devMarker.id = id;
devMarker.type = type;
devMarker.content = name;
// 点击事件
devMarker.on('click', markerClick);
devMarker.emit('click', {target: devMarker});
// 拖拽事件
devMarker.on('dragend', function(e) {
console.log('MarkerArrest坐标:'+ e.lnglat.getLng() + ',' + e.lnglat.getLat())
console.log("WWW:"+e.target.id);
console.log("WWW:"+e.target.type);
updateDragendMarker(e.lnglat.getLng(), e.lnglat.getLat(), e.target.id, e.target.type);
});
map.add(devMarker);
// 自适应缩放
Markers.push(devMarker);
}
// 信息窗体事件
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
拖拽事件
devMarker.on('dragend', function(e) {
console.log('MarkerArrest坐标:'+ e.lnglat.getLng() + ',' + e.lnglat.getLat())
updateDragendMarker(e.lnglat.getLng(), e.lnglat.getLat());
});