高德地图：热力图、点位基础使用

高德地图简单开发

需求

1、目标位置人流数据热力图分布
2、目标位置信息展示监控设备信息

实现

第一步：引入高德地图开发需要的前台JS包
需要申请key使用这里就不多赘述，想使用的去高德API官网申请

热力图

//准备数据
//数据json
/**
{"hotData":[{"lng":126.758938,"count":7623,"ZWMC":"永泰城","lat":45.716417},{"lng":126.617183,"count":6028,"ZWMC":"和兴路","lat":45.730658}]}
**/
var hotDataJson = JSON.parse(mapData);
    var hotArr = hotDataJson.hotData;
//地图初始化
 var aMap = new AMap.Map(conId, {
        resizeEnable: false,
        scrollWheel: true,//是否鼠标滚轮放大缩小
        zoom:12,
        center: [126.660, 45.72703],//中心点坐标
        mapStyle: 'amap://styles/4d735c96a849aed8230b757d2f79dd9f'//地图主题样式
    });
//判断浏览器是否支持 
if (!isSupportCanvas()) {
        alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
    }
//准备数据过滤掉一些错误的经纬度不存在的数据
for(var i=hotArr.length-1; i>=0; i--){
        if(!(hotArr[i].lng) || !(hotArr[i].lat)){
            hotArr.splice(i,1);
        }
    }
//实现地图
if(hotArr.length > 0){
        aMap.plugin(["AMap.Heatmap"], function() {
            //初始化heatmap对象
            var heatmap = new AMap.Heatmap(aMap, {
                radius: 30, //给定半径
                opacity: [0, 0.6],
                gradient:{
                    0.3: 'blue',
                    0.5: 'rgb(117,211,248)',
                    0.7: 'rgb(0, 255, 0)',
                    0.9: '#ffea00',
                    1.0: 'red'
                }
            });
            //设置数据集
            heatmap.setDataSet({
                data: hotArr,
                max: 500
            });
        });
    }

点位图

//准备数据 同上
var hotDataJson = JSON.parse(mapData);
    var hotArr = hotDataJson.ZDSP;
    
 //省略初始化同热力图
if(hotArr.length > 0){
        var markList = [];
        $.each(hotArr,function(i,m){
            // 创建一个 Marker 实例：
            var marker = new AMap.Marker({
                position: new AMap.LngLat(m.JD, m.WD),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: m.NAME
            });
            //这里定义个全局的存放marker的数据 可以清楚点位使用或者地图打点使用
            markList.push(marker);
            //绑定事件弹出信息窗口在做其他操作
            marker.on('click',function () {
                openInfo(aMap,marker,m)
            })
        });
        aMap.add(markList);
    }
//在指定位置打开信息窗体
function openInfo(map,marker,data) {
    var videos = data.VIDEO;
    var zdmc = data.NAME;
    //构建信息窗体中显示的内容
    var info = [];
    $.each(videos,function (i,m) {
        info.push("<p class='input-item' data-id='"+m.CODE+"' οnclick='javascript:jksp(this)'>设备:"+m.NAME+"</p>");
    })
    infoWindow = new AMap.InfoWindow({
        content: '<div style="color: white;opacity:0.7;background:#2B333F;padding: 5px 10px 5px 10px;height: 100%px;width: 350px">' +
            '<div class="bus-tip-top"><span>'+zdmc+'</span></div>'+info.join("")+'</div>', //使用默认信息窗体框样式，显示信息内容
        // anchor: 'bottom-left',
        isCustom:true,//是否自定义样式窗体如果是content的内容样式才会生效
        closeWhenClickMap:true,//是否点击地图关闭弹窗
        offset:new AMap.Pixel(0, -30)//设置弹出信息窗口的位置偏移
    });
    //第一个参数是地图，第二个参数是点的位置
    infoWindow.open(map, marker.getPosition());
}

效果图

扩展

今天接到一个修改模拟实现点击一个marker的ID，能够在地图上实现优先展示这个点的位置；同时触发这个marker的click事件。
这里我做了一个marker创建的修改：
第一步：根据官方API文档参考

创建一个自定义属性这里可以是一个map我就简单创建一个id

第二步：遍历所有marker集合

if(markerArr!=null&&markerArr.length>0){
        $.each(markerArr,function (i,m) {
        //获取我前面的自义定的ID比较
           var y_station_no =  m.getExtData();
           if(x_station_no==y_station_no){
               //优先展示marker位置
               zdMap.setFitView(m);
               //模拟点击事件弹出
               m.emit('click');
           }
        })
    }else{
        alert("站点信息没有初始化完数据...稍等尝试")
    }

细节

细节就是测试调试每一个参数效果与使用

总结

仔细品尝、细心揣摩 、你想要的需求一般都会提供 请教：高德官网API

使用方法：我使用到的函数。方法