高德地图 Javascript API 入门（七）

YuboonaZhang 发布于2019-08-21 11:31 / 2647人阅读

摘要：高德地图入门七热力图插件简单例子显示地图坐标点加载热力图插件预览参数构造函数说明构造一个热力图插件对象，为要叠加热力图的地图对象，属性参考列表中的说明。

高德地图 Javascript API 入门（七） 热力图插件 简单例子

// 显示地图
var map=new AMap.Map("container",{
    resizeEnable:true,
    center:[116.397428, 39.90923],
    zoom:11
});
// 坐标点
var points =[
    {"lng":116.191031,"lat":39.988585,"count":100},
    {"lng":116.389275,"lat":39.925818,"count":60},
    {"lng":116.287444,"lat":39.810742,"count":200},
    {"lng":116.481707,"lat":39.940089,"count":30},
    {"lng":116.410588,"lat":39.880172,"count":200},
    {"lng":116.394816,"lat":39.91181,"count":10},
    {"lng":116.416002,"lat":39.952917,"count":150}
];
// 加载热力图插件
map.plugin(["AMap.Heatmap"],function () {
     var heatmap=new AMap.Heatmap(map,{
        radius:50
    });
    heatmap.setDataSet({
           data:points,
        max:100
       });
)};

预览

参数

AMap.Heatmap

构造函数	说明
AMap.Heatmap(map:Map,opts:HeatmapOptions)	构造一个热力图插件对象，map为要叠加热力图的地图对象，opts属性参考HeatmapOptions列表中的说明。

options

HeatmapOptions	类型	说明
radius	Number	热力图中单个点的半径，默认：30，单位：pixel
gradient	Object	热力图的渐变区间，热力图按照设置的颜色及间隔显示热力图，例： { 0.4:"rgb(0, 255, 255)", 0.65:"rgb(0, 110, 255)", 0.85:"rgb(100, 0, 255)", 1.0:"rgb(100, 0, 255)" } 其中 key 表示间隔位置，取值范围： [0,1]，value为颜色值。默认：heatmap.js标准配色方案
opacity	Array	热力图透明度数组，取值范围[0,1]，0表示完全透明，1表示不透明，默认：[0,1]
zooms	Array	支持的缩放级别范围，取值范围[3-18]，默认：[3,18]

------ 参考来源：http://lbs.amap.com/ 作者：Yangfan

云服务器 GPU云服务器高德地图api接口高德地图api接口文档高德地图高德地图大数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86805.html

高德地图 Javascript API 入门（一）

摘要：高德地图入门一准备工作首先注册个开发者账号然后创建应用，获取新建文件，在标签中引入如下代码把你的值填入即可您申请的值创建设置地图容器地图初始化创建地图设置地图参数可以通过以下设置也可通过对象的方法设置预览个性化地图改变地图样式目前支持五种地高德地图 Javascript API 入门（一）准备工作首先注册个开发者账号 showImg(https://segmentfault.co...

jone5679 2019-08-20 14:29 评论0 收藏0
高德地图 Javascript API 入门（二）

摘要：鼠标在地图上拉框即可绘制相应的矩形。鼠标在地图上单击绘制量测区域，鼠标左键双击或右键单击结束当前量测操作，并显示本次量测结果。参数设为时，鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象设为时，保留所绘制的覆盖物对象。高德地图 Javascript API 入门（二）鼠标工具插件测量距离 JS map.plugin([AMap.MouseTool],function ()...

dockerclub 2019-08-20 14:29 评论0 收藏0
高德地图 Javascript API 入门（六）

摘要：高德地图入门六出行规划公交路径公交换乘服务，提供起终点公交路线规划服务，整合步行方式初始化加载公交线路插件实例化北京必须值，搭乘公交所在城市可选值，搜索结果的标注线路等均会自动添加到此地图上可选值，显示搜索列表的容器可选值，详细信息驾驶策略高德地图 Javascript API 入门（六）出行规划公交路径公交换乘服务，提供起、终点公交路线规划服务，整合步行方式初始化 // 加...

idisfkj 2019-08-20 14:39 评论0 收藏0
高德地图 Javascript API 入门（三）

摘要：高德地图入门三距离测量插件区别虽然鼠标工具插件也提供距离量测功能，但是距离量测插件，提供更为丰富的样式设置功能。高德地图 Javascript API 入门（三）距离测量插件区别虽然鼠标工具插件也提供距离量测功能，但是距离量测插件，提供更为丰富的样式设置功能。加载插件 JS map.plugin([AMap.RangingTool],function () { ...

EdwardUp 2019-08-20 14:29 评论0 收藏0
高德地图 Javascript API 入门（四）

摘要：高德地图入门四地图覆盖物覆盖物类名说明是否插件点标记否覆盖物点标记复杂点标记对象，对普通点标记的扩展否覆盖物折线否覆盖物多边形否覆盖物圆否图片覆盖物否地图右键菜单否点标记预览自定义点标记预览多边形预览右键菜单添加右键菜单内容项放大缩小添加高德地图 Javascript API 入门（四）地图覆盖物覆盖物类名说明是否插件 AMap.Marker 点标记否 AM...

AlanKeene 2019-08-20 14:29 评论0 收藏0