第66行: | 第66行: | ||
</div><!-- 表格接口,可有多个 --> | </div><!-- 表格接口,可有多个 --> | ||
<div class="table_wrap_con"> | <div class="table_wrap_con"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div class="table_wrap_w"> | <div class="table_wrap_w"> | ||
<div> | <div> | ||
第148行: | 第93行: | ||
</div> | </div> | ||
<div> | <div> | ||
− | <div> | + | <div>removeItem(T item)</div> |
</div> | </div> | ||
<div> | <div> | ||
− | <div> | + | <div>移除单个聚合点</div> |
</div> | </div> | ||
</div> | </div> | ||
第170行: | 第115行: | ||
</div> | </div> | ||
<div> | <div> | ||
− | + | <div>setOnClusterItemClickListener(OnClusterItemClickListener<T> listener)</div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <div>setOnClusterItemClickListener(OnClusterItemClickListener | + | |
− | + | ||
</div> | </div> | ||
<div> | <div> | ||
<div>设置单个聚合点点击回调</div> | <div>设置单个聚合点点击回调</div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
第233行: | 第132行: | ||
</div> | </div> | ||
<div class="pre-nav" style="margin-left: 10px;"> | <div class="pre-nav" style="margin-left: 10px;"> | ||
− | <div> | + | <div>注意在地图加载完成回调里添加聚合点</div> |
</div> | </div> | ||
<div class="pre-wrap"> | <div class="pre-wrap"> | ||
第240行: | 第139行: | ||
</div><!-- 安卓示例代码位置 --> | </div><!-- 安卓示例代码位置 --> | ||
<div class="pre-wrap-w pre-wrap-w-and"> | <div class="pre-wrap-w pre-wrap-w-and"> | ||
− | <pre class="prettyprint prettyprinted pre-and">mBaiduMap.setOnMapLoadedCallback(new BaiduMap.OnMapLoadedCallback() { | + | <pre class="prettyprint prettyprinted pre-and"> |
+ | mBaiduMap.setOnMapLoadedCallback(new BaiduMap.OnMapLoadedCallback() { | ||
@Override | @Override | ||
public void onMapLoaded() { | public void onMapLoaded() { | ||
第268行: | 第168行: | ||
<div class="left-icon"></div> | <div class="left-icon"></div> | ||
<div>核心代码</div> | <div>核心代码</div> | ||
+ | </div> | ||
+ | <div class="pre-nav"> | ||
+ | <div>1.初始化</div> | ||
</div> | </div> | ||
<div class="pre-wrap"> | <div class="pre-wrap"> | ||
第274行: | 第177行: | ||
</div><!-- 安卓示例代码位置 --> | </div><!-- 安卓示例代码位置 --> | ||
<div class="pre-wrap-w pre-wrap-w-and"> | <div class="pre-wrap-w pre-wrap-w-and"> | ||
− | <pre class="prettyprint prettyprinted pre-and">/** | + | <pre class="prettyprint prettyprinted pre-and"> |
+ | private void initCluster() { | ||
+ | // 定义点聚合管理类ClusterManager | ||
+ | mClusterManager = new ClusterManager<MyItem>(this, mBaiduMap); | ||
+ | mBaiduMap.setOnMapStatusChangeListener(mClusterManager); | ||
+ | mBaiduMap.setOnMarkerClickListener(mClusterManager); | ||
+ | |||
+ | mClusterManager | ||
+ | .setOnClusterClickListener(new ClusterManager.OnClusterClickListener<MyItem>() { | ||
+ | |||
+ | @Override | ||
+ | public boolean onClusterClick(Cluster<MyItem> cluster) { | ||
+ | Toast.makeText(ClusterMarkerActivity.this, "有" + cluster.getSize() + "个点", | ||
+ | Toast.LENGTH_SHORT).show(); | ||
+ | return false; | ||
+ | } | ||
+ | }); | ||
+ | mClusterManager.setOnClusterItemClickListener( | ||
+ | new ClusterManager.OnClusterItemClickListener<MyItem>() { | ||
+ | @Override | ||
+ | public boolean onClusterItemClick(MyItem item) { | ||
+ | Toast.makeText(ClusterMarkerActivity.this, "点击单个Item", Toast.LENGTH_SHORT) | ||
+ | .show(); | ||
+ | return false; | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | </pre> | ||
+ | <div class="pre-btn"> | ||
+ | <div class="pre-btn-copy-and">复制</div> | ||
+ | <div class="pre-btn-cb-and">深色</div> | ||
+ | </div> | ||
+ | <div class="success">复制成功</div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="pre-nav"> | ||
+ | <div>2.添加item</div> | ||
+ | </div> | ||
+ | <div class="pre-wrap"> | ||
+ | <div class="pre-wrap-nav"> | ||
+ | <div>JAVA</div> | ||
+ | </div><!-- 安卓示例代码位置 --> | ||
+ | <div class="pre-wrap-w pre-wrap-w-and"> | ||
+ | <pre class="prettyprint prettyprinted pre-and"> | ||
+ | /** | ||
* 向地图添加Marker点 | * 向地图添加Marker点 | ||
*/ | */ | ||
public void addMarkers() { | public void addMarkers() { | ||
− | // 添加Marker点 | + | // 添加Marker点 |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | List<MyItem> items = getMaytiems(); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | mClusterManager.addItems(items); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | mClusterManager.addItems(items); | + | |
} | } | ||
− | |||
</pre> | </pre> | ||
<div class="pre-btn"> | <div class="pre-btn"> | ||
第322行: | 第239行: | ||
</div> | </div> | ||
</div> | </div> | ||
− | |||
第361行: | 第277行: | ||
<!-- IOS使用产品下选项,可有多个 --> | <!-- IOS使用产品下选项,可有多个 --> | ||
<!-- 产品1|/index.php?title=test --> | <!-- 产品1|/index.php?title=test --> | ||
− | <div class="documentA"> | + | <div class="documentA">iOS地图SDK|/index.php?title=iossdk</div><!-- --> |
<div>></div> | <div>></div> | ||
<div class="documentA">点聚合|/index.php?title=iossdk/guide/map-render/pointPoly</div> | <div class="documentA">点聚合|/index.php?title=iossdk/guide/map-render/pointPoly</div> |
2020年6月2日 (二) 19:38的版本
点聚合
功能场景
通过该功能可以避免因Marker绘制过多呈现拥挤的情况,获得更优的展示效果,常用于充电桩、房产等app中。
Android
iOS
//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/Android点聚合.mp4
1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/qrcodes/点聚合.png
扫码体验
使用产品
Android地图SDK|/index.php?title=androidsdk
>
点聚合|/index.php?title=androidsdk/guide/render-map/conflux
下载源码
//mapopen-website-wiki.bj.bcebos.com/demos/BaiduMapSDKExample.zip
核心接口
类
接口
描述
ClusterManager
addItems(Collection<T> items
添加一组聚合点
ClusterManager
addItem(T myItem)
添加单个聚合点
ClusterManager
removeItem(T item)
移除单个聚合点
ClusterManager
setOnClusterClickListener(OnClusterClickListener<T> listener)
设置聚合簇点击回调
ClusterManager
setOnClusterItemClickListener(OnClusterItemClickListener<T> listener)
设置单个聚合点点击回调
重点关注
注意在地图加载完成回调里添加聚合点
JAVA
mBaiduMap.setOnMapLoadedCallback(new BaiduMap.OnMapLoadedCallback() { @Override public void onMapLoaded() { // 添加marker initCluster(); addMarkers(); // 设置初始中心点为北京 LatLng center = new LatLng(39.963175, 116.400244); // 需要更新下地图状态,聚合点才会显示出来 MapStatusUpdate mapStatusUpdate = MapStatusUpdateFactory.newLatLngZoom(center, 10); mBaiduMap.setMapStatus(mapStatusUpdate); } });
复制
深色
复制成功
核心代码
1.初始化
JAVA
private void initCluster() { // 定义点聚合管理类ClusterManager mClusterManager = new ClusterManager<MyItem>(this, mBaiduMap); mBaiduMap.setOnMapStatusChangeListener(mClusterManager); mBaiduMap.setOnMarkerClickListener(mClusterManager); mClusterManager .setOnClusterClickListener(new ClusterManager.OnClusterClickListener<MyItem>() { @Override public boolean onClusterClick(Cluster<MyItem> cluster) { Toast.makeText(ClusterMarkerActivity.this, "有" + cluster.getSize() + "个点", Toast.LENGTH_SHORT).show(); return false; } }); mClusterManager.setOnClusterItemClickListener( new ClusterManager.OnClusterItemClickListener<MyItem>() { @Override public boolean onClusterItemClick(MyItem item) { Toast.makeText(ClusterMarkerActivity.this, "点击单个Item", Toast.LENGTH_SHORT) .show(); return false; } }); }
复制
深色
复制成功
2.添加item
JAVA
/** * 向地图添加Marker点 */ public void addMarkers() { // 添加Marker点 List<MyItem> items = getMaytiems(); mClusterManager.addItems(items); }
复制
深色
复制成功