基于高德地图实现热力地图和标记点显示文字

2024-04-13 12:07:36

效果图：

点击预览实例

实现方法：

1，需要注册高德的开发者账号

2，申请使用的key：方便地图个性化的设置

3，代码：

<head>

<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />

<script src="https://webapi.amap.com/maps?v=1.4.3&key=60d4634515d0206931c19dc552d6f7a1"></script>

<head>

<body>

<div id="container"></div>

<script>

// 模拟数据

var points = [{

lat: 31.95266,

lng: 118.84002,

count: 10,

title: '测试1'

},

{

lat: 31.92266,

lng: 118.84002,

count: 20,

title: '测试2'

},

{

lat: 32.086865908,

lng: 118.79769709,

count: 5,

title: '测试3'

},

{

lat: 31.9687296,

lng: 118.798171148,

count: 7,

title: '测试4'

},

{

lat: 32.05895,

lng: 118.628161,

count: 15,

title: '测试5'

},

{

lat: 31.987914,

lng: 118.733302,

count: 35,

title: '测试6'

},

{

lat: 32.052875011,

lng: 118.622278017,

count: 55,

title: '测试7'

},

];

window.onload = function () {

heatMap();

}

function heatMap() {

var markers = [];

var heatmap;

//初始化设置地图

var map = new AMap.Map("container", {

resizeEnable: true,

center: [118.79647, 32.05838], //当前位置:南京。

zoom: 11, //初始化缩放级别 [0,20]

mapStyle: 'amap://styles/macaron', //设置地图的显示样式

enableMapClick: false

});

if (!isSupportCanvas()) {

alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')

}

// 设置marker标记

// points 为假数据

for (var i = 0; i < points.length; i += 1) {

var marker;

marker = new AMap.Marker({

position: [points[i].lng, points[i].lat],

title: points[i].title,

map: map

});

markers.push(marker);

}

map.setFitView();

//创建heatmap对象实例（设置热力点样式，如大小，透明度等）

map.plugin(["AMap.Heatmap"], function () {

//初始化heatmap对象

heatmap = new AMap.Heatmap(map, {

//visible:true, //visible 热力图是否显示,默认为true

//backgroundColor:rgba(0,102,256,0.2), //画板的背景颜色设置，支持rgb(a)，颜色名称，但必须要用引号

radius: 25, //热力图的每个点的半径大小 [0,+∞)

opacity: [0, 0.8], //热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity

gradient: { //热力图的颜色渐变区间。 {JSON}:key 插值的位置, 0-1; value颜色值

0.5: 'blue',

0.65: 'rgb(117,211,248)',

0.7: 'rgb(0, 255, 0)',

0.9: '#ffea00',

1.0: 'red'

}

});

//设置数据集(把热力图数据放到地图上)

heatmap.setDataSet({

data: points,

max: 10,//热点的count比max的值小就讲显示淡色

});

})

}

//判断浏览区是否支持canvas

function isSupportCanvas() {

var elem = document.createElement('canvas');

return !!(elem.getContext && elem.getContext('2d'));

}

</script>

</body>

实例的源码

基于高德地图实现热力地图和标记点显示文字相关推荐

leafletjs 热力图_leaflet在线地图——常用热力地图
这一篇是leaflet动态地图的第四篇,也是最值得推荐的一篇,这一篇涉及到热力地图填充,通过该篇内容,大家可以体会大leaflet在线地图的R借口在处理热力地图上面颜色标度映射的强大优势. 加载包: ...
如何用2分钟做出一张拥有“黑洞”和“脑洞”的热力地图？
4月10日晚上,天文学家召开全球新闻发布会,宣布首次直接拍摄到黑洞的照片! 人类终于得以一窥宇宙黑洞的真面目,从此连光也无法逃逸的黑洞也不再神秘! 而这次的天文拍摄,从准备到数据分析,再到照片洗成,花 ...
热力地图高德_高德地图：最新动态
高德地图是国内最专业的手机地图,超过3.2亿用户在使用!高德地图是应用商店上数据准确率最高.最省流量.躲避拥堵功能最强大的手机地图,平均每天为用户省油61万升! 高德地图今日宣布上线货车导航功能,帮助 ...
基于高德地图SDK实现跑步路线踩点
前言现在市面上有很多跑步的app,主要的功能大致是记录你的跑步路线以及你的跑步状况,速度距离等,大多是使用了高德地图,百度地图之类的SDK. 之前学校里有一款课外体育考勤的跑步APP,叫运动 ...
基于高德地图的描点操作，监听地图缩放，展示合理数量的marker
原文:基于高德地图的描点操作,监听地图缩放,展示合理数量的marker 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lx583274568/art ...
只用一个marker 替换高德_Android基于高德地图完全自定义Marker的实现方法
前言相信做地图社交类APP开发的大家都知道,一般情况下,为了整体的美观和用户体验度,我们需要定制化Marker的样式.本文中实现的方式都是基于高德地图的,百度地图也类似,大家可以照葫芦画瓢,废话不多 ...
python交通调查数据处理_GitHub - unlimitbladeworks/traffic-monitor: 基于高德地图的交通数据分析...
traffic-monitor(基于高德地图的交通数据分析) 设计需求在于每天上班早高峰期,每次都提前出门,虽然有地图可以实时查看路况,但是再过一阵时间就会异常的堵车如果通过数据监控分析每天指定路段 ...
基于高德地图JsAPI进行浏览器精确定位，实现手机端考勤打卡功能
前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
Android基于高德SDK的开发——自定义地图主题样式（悬浮按钮+底部弹窗）
日常的地图使用中,平台一般只会给我们提供地图的标准样式,造成了一定程度上的审美疲劳,那么如何实现地图的自定义样式呢?本文使用Android Studio 4.1,给开发者提供了一个基于高德地图SDK进 ...

最新文章

热门文章