高德地图基础篇
高德地图简单开发需求实现热力图点位图效果图扩展细节总结高德地图简单开发
需求
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
使用方法：我使用到的函数。方法
