高德地图热力图展示

最新推荐文章于 2024-07-31 17:25:12 发布
最新推荐文章于 2024-07-31 17:25:12 发布
阅读量1.8k 收藏 4
点赞数
文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haosicx/article/details/121742987
版权

1.下载这个插件 @amap/amap-jsapi-loader

import AMap from '@amap/amap-jsapi-loader'

2.初始化地图并且创建热力图

 /**  初始化地图  */ 
     async newsMap(){
      this.AMap =   await AMap.load({
        key: '72f3b91c973bdd499a5976547149b567',
        version: '1.4.15'
      })
        this.map = new this.AMap.Map('container', {
         resizeEnable: true,
          zoom: 11, //级别
          center: [116.418261, 39.921984],
        })
          this.hot()       
    },
    /**  热力图  */ 
    hot(){
      var points=[
        {"lat":40.04372,"lng":117.627983,"count":1},
        {"lat":39.955631,"lng":117.457741,"count":1},
        {"lat":39.993408,"lng":117.45536,"count":1},
        {"lat":39.994091,"lng":117.454597,"count":1},
        {"lat":39.994202,"lng":117.454788,"count":1},
        {"lat":39.894291,"lng":117.46257,"count":1},
        {"lat":39.892929,"lng":117.463181,"count":1},
        {"lat":39.89397,"lng":117.462479,"count":1},
        {"lat":39.969528,"lng":117.372078,"count":1},
        {"lat":39.994122,"lng":117.45446,"count":1},
        {"lat":39.993881,"lng":117.455231,"count":1},
        {"lat":40.005829,"lng":117.452492,"count":1},
        {"lat":40.020748,"lng":117.451881,"count":1},
        {"lat":39.969421,"lng":117.372124,"count":1},
        {"lat":39.994221,"lng":117.45443,"count":1},
        {"lat":39.993809,"lng":117.455597,"count":1},
        {"lat":39.993809,"lng":117.455597,"count":1},
        {"lat":39.994202,"lng":117.454407,"count":1},
        {"lat":39.99324,"lng":117.454758,"count":1},
        {"lat":39.994221,"lng":117.454338,"count":1},
        {"lat":39.992401,"lng":117.456612,"count":1},
        {"lat":39.994041,"lng":117.454399,"count":1},
        {"lat":39.89801,"lng":117.414047,"count":1},
        {"lat":39.898361,"lng":117.415947,"count":1},
        {"lat":39.897999,"lng":117.414078,"count":1},
        {"lat":39.99371,"lng":117.454964,"count":1},
        {"lat":39.993969,"lng":117.454559,"count":1},
        {"lat":39.992512,"lng":117.454826,"count":1},
        {"lat":39.993889,"lng":117.455231,"count":1},
        {"lat":39.99398,"lng":117.455032,"count":1},
        {"lat":39.895111,"lng":117.462273,"count":1},
        {"lat":39.913422,"lng":117.415283,"count":1},
        {"lat":39.993832,"lng":117.455391,"count":1},
        {"lat":39.993649,"lng":117.454674,"count":1},
        {"lat":39.951908,"lng":117.445137,"count":1},
        {"lat":39.912979,"lng":117.415421,"count":1},
        {"lat":39.994099,"lng":117.454857,"count":1},
        {"lat":39.991989,"lng":117.454826,"count":1},
        {"lat":39.912971,"lng":117.415466,"count":1},
        {"lat":39.913052,"lng":117.415482,"count":1},
        {"lat":39.912979,"lng":117.417778,"count":1},
        {"lat":39.891682,"lng":117.463417,"count":1},
        {"lat":39.894798,"lng":117.462471,"count":1},
        {"lat":39.908428,"lng":117.427,"count":1},
        {"lat":39.992981,"lng":117.454773,"count":1},
        {"lat":39.99403,"lng":117.455132,"count":1},
        {"lat":39.993591,"lng":117.455513,"count":1},
        {"lat":39.89323,"lng":117.462997,"count":1},
        {"lat":39.89323,"lng":117.462997,"count":1},
        {"lat":40.249329,"lng":117.366669,"count":1},
        {"lat":40.24934,"lng":117.366768,"count":1},
        {"lat":39.991982,"lng":117.454826,"count":1},
        {"lat":39.97134,"lng":117.45507,"count":1},
        {"lat":39.999599,"lng":117.394096,"count":1},
        {"lat":39.993931,"lng":117.454681,"count":1},
        {"lat":39.994091,"lng":117.454437,"count":1},
        {"lat":39.991989,"lng":117.454826,"count":1},
        {"lat":39.890659,"lng":117.463791,"count":1},
        {"lat":39.89325,"lng":117.463402,"count":1},
        {"lat":39.894981,"lng":117.462181,"count":1},
        {"lat":39.891472,"lng":117.463547,"count":1},
        {"lat":39.99374,"lng":117.455177,"count":1},
        {"lat":39.994202,"lng":117.454613,"count":1},
        {"lat":39.977379,"lng":117.437683,"count":1},
        {"lat":39.949791,"lng":117.462158,"count":1},
        {"lat":39.895088,"lng":117.462219,"count":1},
        {"lat":39.993992,"lng":117.455353,"count":1},
        {"lat":39.993698,"lng":117.454941,"count":1},
        {"lat":39.9921,"lng":117.454437,"count":1},
        {"lat":39.89389,"lng":117.462334,"count":1},
        {"lat":39.89238,"lng":117.463188,"count":1},
        {"lat":39.99419,"lng":117.454514,"count":1},
        {"lat":39.993328,"lng":117.455078,"count":1},
        {"lat":39.993752,"lng":117.454773,"count":1},
        {"lat":39.984779,"lng":117.467529,"count":1},
        {"lat":39.890961,"lng":117.463692,"count":1},
        {"lat":39.993858,"lng":117.455139,"count":1},
        {"lat":39.99202,"lng":117.4552,"count":1},
        {"lat":39.993729,"lng":117.455231,"count":1},
        {"lat":39.994282,"lng":117.453819,"count":1},
        {"lat":39.992649,"lng":117.455009,"count":1},
        {"lat":39.99379,"lng":117.45462,"count":1},
        {"lat":39.872292,"lng":117.396347,"count":1},
        {"lat":39.870731,"lng":117.388618,"count":1},
        {"lat":39.864349,"lng":117.377289,"count":1},
        {"lat":39.719238,"lng":117.331802,"count":1},
        {"lat":37.43782,"lng":117.455002,"count":1},
        {"lat":37.03352,"lng":117.715134,"count":1},
        {"lat":35.836868,"lng":117.090286,"count":1},
        {"lat":34.246021,"lng":117.31308,"count":1},
        {"lat":33.815498,"lng":117.230698,"count":1},
        {"lat":31.99254,"lng":118.57972,"count":1},
        {"lat":31.14229,"lng":121.38549,"count":1},
        {"lat":39.993961,"lng":117.454727,"count":1},
        {"lat":39.993118,"lng":117.455597,"count":1},
        {"lat":39.946239,"lng":117.450401,"count":1},
        {"lat":39.932121,"lng":117.45546,"count":1},
        {"lat":39.99403,"lng":117.453957,"count":1},
        {"lat":39.99295,"lng":117.455719,"count":1},
        {"lat":39.99184,"lng":117.454819,"count":1},
        {"lat":39.994041,"lng":117.454681,"count":1},
        {"lat":39.99287,"lng":117.454742,"count":1},
        {"lat":39.9939,"lng":117.455,"count":1},
        {"lat":39.992741,"lng":117.455673,"count":1},
        {"lat":39.994141,"lng":117.45491,"count":1},
        {"lat":39.992229,"lng":117.454903,"count":1},
        {"lat":39.99369,"lng":117.455383,"count":1},
        {"lat":39.969921,"lng":117.49221,"count":1},
        {"lat":39.997921,"lng":117.38343,"count":1},
        {"lat":39.992619,"lng":117.453873,"count":1},
        {"lat":39.992069,"lng":117.454826,"count":1},
        {"lat":39.993679,"lng":117.454529,"count":1},
        {"lat":40.065201,"lng":117.432068,"count":1},
        {"lat":39.992149,"lng":117.454521,"count":1},
        {"lat":39.99395,"lng":117.454559,"count":1},
        {"lat":39.993851,"lng":117.45472,"count":1},
        {"lat":39.993759,"lng":117.454529,"count":1},
        {"lat":39.991508,"lng":117.45636,"count":1},
        {"lat":39.993858,"lng":117.454979,"count":1},
        {"lat":39.967789,"lng":117.452217,"count":1},
        {"lat":39.99387,"lng":117.455193,"count":1},
        {"lat":39.994179,"lng":117.454727,"count":1},
        {"lat":39.992538,"lng":117.456459,"count":1},
        {"lat":39.99382,"lng":117.454651,"count":1},
        {"lat":39.994221,"lng":117.454872,"count":1},
        {"lat":39.951038,"lng":117.471687,"count":1},
        {"lat":39.99416,"lng":117.454552,"count":1},
        {"lat":40.005821,"lng":117.457581,"count":1},
        {"lat":39.97131,"lng":117.455139,"count":1},
        {"lat":39.992691,"lng":117.456352,"count":1},
        {"lat":39.99379,"lng":117.455048,"count":1},
        {"lat":39.99408,"lng":117.454681,"count":1},
        {"lat":39.893532,"lng":117.462914,"count":1},
        {"lat":39.994129,"lng":117.455147,"count":1},
        {"lat":39.99292,"lng":117.455643,"count":1},
        {"lat":39.99292,"lng":117.455643,"count":1},
        {"lat":39.99366,"lng":117.454567,"count":1},
        {"lat":40.008179,"lng":117.460098,"count":1},
        {"lat":39.993721,"lng":117.454727,"count":1},
        {"lat":40.044239,"lng":117.280792,"count":1},
        {"lat":39.971821,"lng":117.37394,"count":1},
        {"lat":39.969509,"lng":117.370239,"count":1},
        {"lat":39.993839,"lng":117.454659,"count":1},
        {"lat":39.89526,"lng":117.466301,"count":1},
        {"lat":39.894329,"lng":117.462463,"count":1},
        {"lat":39.893089,"lng":117.46302,"count":1},
        {"lat":39.894791,"lng":117.46228,"count":1},
        {"lat":39.994221,"lng":117.454521,"count":1},
        {"lat":39.89296,"lng":117.463112,"count":1},
        {"lat":39.97855,"lng":117.369019,"count":1},
        {"lat":39.99416,"lng":117.454102,"count":1},
        {"lat":39.99411,"lng":117.454422,"count":1},
        {"lat":39.894711,"lng":117.46257,"count":1},
        {"lat":39.890781,"lng":117.463707,"count":1},
        {"lat":39.994129,"lng":117.454422,"count":1}

      ];
      console.log(this.map);
      this.map.plugin(["AMap.Heatmap"],  ()=> {
          //初始化heatmap对象
          let heatmap = new this.AMap.Heatmap(this.map, {
              radius: 25, //给定半径
              opacity: [0, 0.8]
          });
          // console.log(heatmap.setDataSet);
            heatmap.setDataSet({
              data: points,
              max: 5
          });
      });
    },

注意 : 热力图是需要导入插件的 在html里引入cdn

    <script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
haosicx
关注
vue2 - 最新详细实现高德地图绘制动态热力图详细教程，在某区域或城市地图上做“热力图层“展示人流量、旅游人口密度、热量图、全国地区地理热力图，利用颜色的深浅表示密度或强度等场景（详细示例代码教程）
高级前端工程师
08-05 2408
vue2，nuxt2，高德地图，热力图，绘制热力图层，报错，卡顿，出不来怎么办，无法关闭，怎么解决这个问题，出错，城市名称，城市某个街道，城区，省份，市区，县城，乡镇，村，各省份的热力图，交通流量，人口流量，密度，旅游出行，人口数量，颜色介绍，深浅代表，人流量，vue2使用高德地图实现某个区域热力图，vue高德地图api加载热力图及关闭，接收热力图数据并渲染热力图，关掉热力图，Vue使用高德API制作热力图，热力图加载不出来，电子围栏围住热力图，vue2中使用高德地图渲染热力图组件，高德地图使用热力图详细教
vue3 - 最新详细实现高德地图绘制动态热力图详细教程，在某区域或城市地图上做“热力图层“展示人流量、旅游人口密度、热量图、全国地区地理热力图，利用颜色的深浅表示密度或强度等场景（详细示例代码教程）
最新发布
高级前端工程师
08-04 2995
vue3，nuxt3，高德地图，热力图，绘制热力图层，人流量，vue3使用高德地图实现某个区域热力图，vue3高德地图api加载热力图及关闭，接收热力图数据并渲染热力图，关掉热力图，Vue使用高德API制作热力图，热力图加载不出来，电子围栏围住热力图，vue3中使用高德地图渲染热力图组件，高德地图使用热力图详细教程，报错，卡顿，出不来怎么办，无法关闭，怎么解决这个问题，出错，城市名称，城市某个街道，城区，省份，市区，县城，乡镇，村，各省份的热力图，交通流量，人口流量，密度，旅游出行，人口数量，颜色介绍，深浅
数据可视化----高德API热力图
weixin_43950985的博客
10-28 1万+
目录需求3D热力图的基本配置热力图展示官方文档 需求 起初做这个数据可视化分析原因是：-_-IT信息服务费难收啊！，借钱容易收钱难哦！各个分公司的都在哭穷，找各种理由说是业绩不好，销量不足，总是一到收钱的时候就哭穷说没钱，搞得我们这些小鱼小虾也是非常无奈。（–.--话说做IT码代码的之外，还要做合同催收账款哦，也是没谁了！） 所以想了一下，刚好各地分公司的业务主数据都在我们BI运营的BQ数据库有快...
高德热力图动态切换
04-17
高德地图，高德热力图，高德地图热力图，热力动态，热力图动态打点
高德地图amap热力图替换瓦片热力图
qq_67012436的博客
07-31 416
后经过排除后发现原项目中继承了旧版本vue-amap与当前版本有冲突，遂隐藏了旧版的引入分别在public/index.html中引入的三方api的js和main.js中引入的旧版本vue-amap更换为了新版本vue-amap，因目前使用热力图貌似不用在public中配置故只是隐藏重复调用的三方api，若不隐藏public/index中的引入的js则也无法正常展示地图提示。最后使用vue-amap展示热力图比较简单，按照文档中的示例即可正常展示。今天解决地图热力图原使用的瓦片图，替换为高德地图。
高德地图上绘制热力图的方法
caoyongsheng的博客
02-15 1754
百度地图和高德地图的JavaScript API都提供了热力图的绘制方法，都是将热力图作为新的图层，叠加到地图上。但是百度地图的经纬度体系与我们的经纬度存在偏差，高德的与我们相符，应当使用高德地图JavaScript API。准备本章向您介绍使用高德地图JSAPI开发应用之前的一些准备工作。因为是JavaScript API，所以地图展示是在网页上的。在html文件中添加高德地图必须的script，其中第一行的key可以在高德官网免费申请。准备-入门-教程-地图 JS API 1.4 | 高德地图API。
高德热力图
weixin_34301132的博客
11-26 623
1.高德开发指南：http://lbs.amap.com/api/android-sdk/guide/draw-on-map/draw-heatmap/ 2.开发指南代码： private MapView mMapView; private AMap mAMap; private static final int[] ALT_HEATMAP_GRADIENT_COLOR...
vue 高德地图使用热力图
cdd9527的博客
01-29 3606
vue 高德地图使用热力图
高德大赛作品展示： 炫酷洋气“热力图“
weixin_33835690的博客
06-02 612
“高德LBS开源组件大赛”赛程过半，一批优秀的开源组件产品已经诞生，不但有非常创意，还特别的实用呢！LBS江湖果真藏龙卧虎~~ 嘿嘿，小编之前已经推出了两回高手过招贴，本周精彩还在继续。 【温馨小提示】呵呵，此次大赛作品提交截止时间为8月31日，大家还有机会哟欢迎更多的同学来提交你精彩的作品，我们热切的等待着你 参赛地址：http://www.oschi...
android高德地图热力图,调用高德地图API（热力图）详解(示例代码)
weixin_35693911的博客
05-27 1105
具体脚本语言如下：热力图var map = new AMap.Map("container", {resizeEnable: true,center: [116.418261, 39.921984],zoom: 11});var points=[{"lng":"116.32497","lat":"39.96696"},{"lng":"116.616","lat":"40.053016"},{"ln...
vue.js高德地图实现热点图代码实例
10-17
通过上述步骤，我们可以成功地在Vue.js应用中集成高德地图，并利用其热力图功能展示数据分布。这个实例不仅展示了如何结合使用Vue.js和高德地图API，还提供了处理数据、错误检查和动态加载等实用技巧，对于需要进行...
地图显示不同类型的多个点标记带热力图
03-21
此展示效果为一个在地图上展示多个不同点的页面，用到的是静态数据，带有展示当前时间的效果，另外点击热力图开关按钮，打开热力图，展示显示范围
vue3引入高德地图代码示例
04-27
内容概要：项目引入高德地图用vue3实现地图功能 适合人群：地图展示 能学到什么：高德地图的一些基础功能的实现。 阅读建议：基于高德地图开发的功能 建议搭配高德开放平台的api一起使用
flume+kafka+sparkstreaming+mysql+ssm+高德地图热力图项目
zhang__rong的博客
03-12 532
一、概述 本篇文章主要介绍如何使用Sparkingtreaming+ flume + Kafka 实现实时数据的计算，并且使用高德地图API实现热力图的展示。 背景知识： 在有些场合，我们需要了解当前人口的流动情况，比如，需要实时监控一些旅游景点旅客的密集程度，这时可以使用GPS定位系统将该区域内旅客的IP数据进行计算，但是GPS定位系统也有一定的缺点，不是每个旅客都会GPS功能，这时可以使...
热力地图高德_《高德地图》城市热力图开启查看方法
热门推荐
weixin_34023073的博客
01-14 9万+
高德地图中有一个城市热力图的功能，开启后，可以查看到相应城市的人口流量等等数据。很多小伙伴想要看看自己当前城市的人口，或者看一下其它哪些地方人比较多，那么具体该如何查看呢？下面小编就来为大家介绍一下高德地图城市热力图的开启查看方法。 高德地图城市热力图在哪看？ 高德地图中热力图可以让我们清楚的知道这个城市中的人口流量多少，城市和区域流量的对比比较等，以及城市哪些地方在慢慢衰减的数据。高...
百度热力图和高德热力图对比
tyoyow的博客
01-23 2万+
1.百度热力图 前提：百度地图的热力图目前只支持有canvas支持的浏览器  步骤： 1.建立地图图层        var map=new BMap.map('mapconElement')  /*2.设置地图的中心点和缩放(建议设置 默认的是 lng:0,lat:0) map.centerAndZoom(p,num) */ 3.创建热力图（百度
python人流热力图_高德地图热力图插件实现人流量监控，如何实现人流数据实时刷新...
weixin_39761647的博客
12-19 2673
showHeatMap();//页面加载时请求数据，渲染用户界面var heatmap;//map为高德地图实例，AMap.Heatmap为高德地图热力图插件map.plugin(["AMap.Heatmap"], function () {heatmap = new AMap.Heatmap(map, {radius: 45, //给定半径opacity: [0, 0.9],gradient: ...
高德地图：热力图、点位基础使用
weixin_43450799的博客
04-18 1万+
高德地图开发心得与分享--仔细阅读官网API
基于高德地图api的热力图配置及显示调优
孙雪峰
09-25 1万+
基于高德地图api的热力图配置及显示调优缘起使用热力图的基本配置加载js组件和数据加载组件加载数据重要参数说明显示调优rediusmax参考 缘起 领导要求根据公交订单的起点/终点数据，来展示用户下单的起点/终点的分布情况，这时用热力图来表示分布情况更加直观。 在使用高德地图热力图api的过程中，被几个参数折磨到凌晨2点多，将经验总结如下。 使用热力图的基本配置 在热力图api实例中有标准代码。 ...
高德地图api热力图js api
07-28
高德地图 API 提供了热力图的 JavaScript API。通过该 API，您可以在网页上展示高德地图的热力图功能。您可以使用以下步骤来使用高德地图 API 的热力图功能： 1. 在您的网页中引入高德地图的 JavaScript API。您可以使用以下代码将高德地图 JavaScript API 引入到您的网页中： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的API Key"></script> ``` 2. 创建一个地图容器。您可以在网页中创建一个 `<div>` 元素作为地图容器，例如： ```html <div id="mapContainer" style="width: 100%; height: 400px;"></div> ``` 3. 初始化地图对象。在 JavaScript 代码中，您可以使用以下代码初始化地图对象： ```javascript var map = new AMap.Map('mapContainer', { zoom: 13, // 缩放级别 center: [116.397428, 39.90923] // 地图中心点坐标 }); ``` 4. 添加热力图层。在 JavaScript 代码中，您可以使用以下代码创建并添加热力图层： ```javascript var heatmap; AMap.plugin(['AMap.Heatmap'], function() { heatmap = new AMap.Heatmap(map, { radius: 25, // 热力图点半径 opacity: [0, 0.8], // 热力图透明度范围 gradient: { 0.5: 'blue', 0.65: 'rgb(117,211,248)', 0.7: 'rgb(0, 255, 0)', 0.9: '#ffea00', 1.0: 'red' } // 热力图渐变区间颜色 }); // 设置热力图数据 heatmap.setDataSet({ data: 热力图数据数组 }); }); ``` 请注意，上述代码中的 `您申请的API Key` 需要替换为您在高德开放平台申请的 API Key。热力图数据数组需要根据您的实际需求进行提供。 通过以上步骤，您就可以在网页中使用高德地图 API 的热力图功能了。更多详细的文档和示例代码可以参考高德地图开放平台的官方文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值