【map】高德地图点聚合

更具产品需求，需要做一个地图显示房源信息的功能
先展示吧：

使用的是高德地图API，一开始看文档怎么也找不到AMap的IndexCluster插件，只好直接从案例入手了,找案例数据结构，F12看了下，找到了2个JSON数据，一个是地区，一个是街道。然后更具需求修改数据结构与信息框内容、样式等等

https://a.amap.com/jsapi_demos/static/data/community.js
https://a.amap.com/jsapi_demos/static/data/district.js

JSON数据结构与代码：

const roomData = [{"lnglat": {className: "AMap.LngLat", lng: 114.177087, lat: 22.313861},"district": "旺角","community": "高级公寓","building": "旺角高级公寓","area": "旺角","city": "香港"},{"lnglat": {className: "AMap.LngLat", lng: 114.174986, lat: 22.310604},"district": "油麻地","community": "油麻地一期(四室两厅)","building": "油麻地一期","area": "油麻地","city": "香港"},{"lnglat": {className: "AMap.LngLat", lng: 114.194512, lat: 22.326271},"district": "九龙城","community": "九龙城二期公寓（三房）","building": "九龙城二期公寓","area": "九龙城","city": "香港"},{"lnglat": {className: "AMap.LngLat", lng: 114.193718,lat: 22.320204},"district": "九龙城一期","community": "九龙城一期公寓（三房）","building": "九龙城一期公寓","area": "九龙城","city": "香港"},{"lnglat": {className: "AMap.LngLat", lng: 114.171547, lat: 22.319974},"district": "太子","community": "太子一期公寓","building": "太子一期","area": "太子","city": "香港"},{"lnglat": {className: "AMap.LngLat", lng: 114.175074, lat: 22.31805},"district": "极家","community": "极家公寓(H13)","building": "极家公寓(H13)","area": "极家","city": "香港"},{"lnglat": {className: "AMap.LngLat", lng: 114.180711, lat: 22.439183},"district": "大埔墟","community": "大埔墟(山海别墅)","building": "大埔墟别墅","area": "大埔墟","city": "香港"}
]
const district = {'香港': {"center" : "114.171202,22.277469",},'油尖旺区': {"center": "114.173331,22.311704",},'九龙城区': {"center" : "114.192846,22.31251",},'大埔区': {"center" : "114.171743,22.445653",}
};
// 绘制初始化地图
var map = new AMap.Map('container', {zoom:15,//级别center: [114.177087, 22.313861],//中心点坐标viewMode:'3D'//使用3D视图
});var count = roomData.length;function clusterMarkers() {var markerList = [];var marker = new AMap.Marker({map: map,})markerList.push(marker);return markerList;
}
// 设置不同组群不同缩放级别
var clusterIndexSet = {city: {minZoom: 2,maxZoom: 10,},district: {minZoom: 10,maxZoom: 12,},area: {minZoom: 12,maxZoom: 15,},community: {minZoom: 15,maxZoom: 22,},
};
// 设置样式
function getStyle(context) {var clusterData = context.clusterData; // 聚合中包含数据var index = context.index; // 聚合的条件var count = context.count; // 聚合中点的总数var marker = context.marker; // 聚合绘制点 Marker 对象var color = ['8,60,156','66,130,198','107,174,214','78,200,211',];var indexs = ['city','district','area','community'];var i = indexs.indexOf(index['mainKey']);var text = clusterData[0][index['mainKey']];var size = Math.round(30 + Math.pow(count / roomData.length, 1 / 5) * 70);if(i <= 2){var extra = '<span class="showCount">'+ context.count +'套</span>';text = '<span class="showName">'+ text +'</span>';text += extra;} else {size = 12 * text.length + 20;}var style = {bgColor: 'rgba(' + color[i] + ',.8)',borderColor: 'rgba(' + color[i] + ',1)',text: text,size: size,index: i,color: '#ffffff',textAlign: 'center',boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'}return style;
}
function getPosition(context) {var key = context.index.mainKey;var dataItem = context.clusterData && context.clusterData[0];var districtName = dataItem[key];if(!district[districtName]) {return null;}var center = district[districtName].center.split(',');var centerLnglat = new AMap.LngLat(center[0], center[1]);return centerLnglat;
}
// 自定义聚合点样式
function _renderClusterMarker (context) {var clusterData = context.clusterData; // 聚合中包含数据var index = context.index; // 聚合的条件var count = context.count; // 聚合中点的总数var marker = context.marker; // 聚合点标记对象var styleObj = getStyle(context);// 自定义点标记样式var div = document.createElement('div');div.className = 'amap-cluster';div.style.backgroundColor = styleObj.bgColor;div.style.width = styleObj.size + 'px';if(styleObj.index <= 2) {div.style.height = styleObj.size + 'px';div.style.lineHeight = styleObj.size + 'px';// 自定义点击事件context.marker.on('click', function(e) {console.log(e)var curZoom = map.getZoom();if(curZoom < 20){curZoom += 1;}map.setZoomAndCenter(curZoom, e.lnglat);});}div.style.border = 'solid 1px ' + styleObj.borderColor;div.style.borderRadius = styleObj.size + 'px';div.innerHTML = styleObj.text;div.style.color = styleObj.color;div.style.textAlign = styleObj.textAlign;div.style.boxShadow = styleObj.boxShadow;div.style.fontSize = 14+'px'div.style.padding = `5px 0`;context.marker.setContent(div)// 自定义聚合点标记显示位置var position = getPosition(context);if(position){context.marker.setPosition(position);}context.marker.setAnchor('center');};
// IndexCluster
var cluster = new AMap.IndexCluster(map, roomData, {renderClusterMarker: _renderClusterMarker,clusterIndexSet: clusterIndexSet,
});

【map】高德地图点聚合—按索引聚合相关推荐

Android高德地图自定义Mark并实现聚合效果
Android高德地图自定义Mark并实现聚合效果起因:公司本来项目里面用到了高德地图,然后最近老板看见别人的APP里面有个聚合的这个功能,老板:"这个效果能不能实现,我也要!" ...
高德地图API总结--Marker多点聚合
Marker多点聚合计算什么是多点聚合呢?所谓的多点聚合,就是计算地图上一定范围内的点的个数,然和讲所有的点统计的数量显示在范围内设置的marker上:我们需要解决的问题有:1.在地图上划定区域范围 ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
amap api 高德地图项目实操 - 区划聚合+海量点展示
demo内代码为amap api 实现项目内地图插件的效果 <!doctype html> <html lang="zh-CN"><head>& ...
安卓高德地图聚合点击事件_滴滴进攻，华为入场，互联网地图迎来大变局|深响独家...
©深响原创 · 作者|丁直仁核心要点市场可能高估了美团与滴滴之间的冲突,而低估了滴滴与高德之间的竞争. 从去年下半年开始,华为便在组建自己的地图团队. 腾讯地图或因数据质量问题遭遇考验: ...
vue高德地图marker批量标记与InfoWindow提示框
一.前言由于数据量大,如果一个一个添加marker会造成页面卡顿,所以在此就使用了批量标记,特此研究出一下几种方法在高德平台获取key 高德开放平台 | 高德地图API 二.批量添加marker ...
小白的高德地图初体验(一) —— 打点
小白的高德地图初体验(一)--打点说到高德地图,肯定要推荐官方文档,☛☛☛传送门,走你~~ ☞☞小白的高德地图初体验(一) -- 打点 ☞☞小白的高德地图初体验(二)--点聚合 ☞☞小白的高德地图初 ...
小白的高德地图初体验(四)—— 矢量图形
小白的高德地图初体验(四)-- 矢量图形这里是官方文档☛☛☛传送门,走你~~ ☞☞小白的高德地图初体验(一) -- 打点 ☞☞小白的高德地图初体验(二)--点聚合 ☞☞小白的高德地图初体验(三) - ...
高德地图推出酒店比价，为爱牵线后能为盈利搭桥吗？
今年七夕情侣浪漫之旅,得从高德地图推出的"酒店比价"服务启程. 疫情阴霾尚未消散,七夕正走俏.七夕正催熟"浪漫经济",启程一次说走就走的旅行,预订一家浪漫又温馨 ...

【map】高德地图点聚合—按索引聚合

JSON数据结构与代码：

【map】高德地图点聚合—按索引聚合相关推荐

最新文章

热门文章