高德地图简单开发

需求

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

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

高德地图：热力图、点位基础使用相关推荐

Android使用高德地图api实现基础定位
Android使用高德地图api实现基础定位(一) 关于会获取SHA1的可自行跳过这一步第二步引用高德sdk 第三步修改MainActivity.java 关于这篇主要讲如何使用高德sdk(不是 ...
Spring Boot+高德地图热力图动态数据展示+MySQL
项目目录 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&quo ...
使用高德地图展示点位和信息窗体展示数据及播放视频
使用高德地图做了一个在地图展示点位,并通过点击,显示直播的功能,这个任务是为了之后大屏做准备. 这是一个能展示多个点标记,并在点击的时候弹出信息窗体,并在信息窗体中播放视频,且展示相关信息以及操作事件 ...
Spring Boot+高德地图热力图静态数据展示
高端开放平台控制台---->应用管理---->我的应用---->创建新应用开发者支持---->示例与体验---->jsAPI示例中心项目目录创建的Spring B ...
高德地图简单点位+轨迹+描述
1.本文代码基于vue3 setup模式,简单的高德地图开发.-2023.03.23 2.以下是相关代码 <script setup> import AMapLoader from '@a ...
解决高德地图热力图数据导入问题
最近,导师让我把密度图映射到地图上,思路是:用Python读取csv中图像的数据然后给每个像素点赋值(经纬度), 当时没有注意api,以为要一个个用js去读,上网搜了很多资料关于js如何读txt读cs ...
【iOS】—— 高德地图SDK基础使用
最近稍微学了学iOS调用高德的SDK,就随便做做笔记.注意:本篇博客基于高德地图SDK的3D地图来写的,若使用的是2D地图可能有的方法可能有所不同,比如自定义定位蓝点之类的. 一.准备工作: 具体的准 ...
【十三】景区人流量统计：python日志生成+logstash+kafka+storm+mysql+springBoot+高德地图
storm+kafka+logstash+springBoot+高德地图项目概述: 作用:交通信息化,智慧城市需求:实时统计人流量并通过热力图展示. 类似于腾讯热力图的景区人流量统计如何采集某个 ...
安卓系统的导航仪怎么设置导航启动路径为高德地图_界面功能焕然一新！高德地图10.0新版体验...
[PConline应用]近日高德地图10.0安卓版与iOS版同时上线,作为一名资深高德迷,我自然第一时间下载并更新了它.没让我失望的是,此次新版不但用上了全新的扁平式UI,各项功能模块也有了大幅进步, ...
vue3 引入高德地图实例
vue3高德地图进阶版地图引入进阶文章末尾有完整代码关于vue项目如何引入高德地图以及一些基础用法见上一篇文章

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

高德地图基础篇

高德地图简单开发

需求

实现

热力图

点位图

效果图

扩展

细节

总结

高德地图：热力图、点位基础使用相关推荐

最新文章

热门文章