基于JS 高德地图设置设备图标

前言：最近做项目客户提了一个需求，就是要在高德地图上将设备用图标显示出来，并且可以移动设备来更改设备经纬度。
第一时间我就去查高德地图，结果发现高德地图的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());
        });

• 批量添加Marker和InfoWindow

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());
    });