Android高德地图自定义Mark并实现聚合效果

起因：公司本来项目里面用到了高德地图，然后最近老板看见别人的APP里面有个聚合的这个功能，老板：“这个效果能不能实现，我也要！”没有办法因为以前没有做过高德地图点聚合这个东西，然后只能勉强的答应下来可以，然后就去看了高德开发者平台上面的给我说的点聚合，看完以后（星星你个大星星），能不能写例子，要是像他那个说的那个简单我真的就是谢谢了！没办法只能去下载高德地图提供给我的dome了，然后看了dome以后在dome的基础上面进行改造，然后就出来了。

先看一下效果

然后我们先看下我们下载下来的高德地图的dome 的结构

打红的框子的就是高德dome的东西，然后查看他的dome你会发现主要的类ClusterOverlay这个类。
然后我们来分析一下dome里面需要我们改的东西。然后我会被解释写在里面
先看一看这个类的构造

/** amap 地图的对象* clusterItems 这个就是数据的集合* clusterSize 聚合范围的大小（指点像素单位距离内的点会聚合到一个点显示）*/public ClusterOverlay(AMap amap,List<ClusterItem> clusterItems,int clusterSize,Context context) {...}

再看下添加点的方法

/*** 将聚合元素添加至地图上*/private void addClusterToMap(List<Cluster> clusters) {ArrayList<Marker> removeMarkers = new ArrayList<>();removeMarkers.addAll(mAddMarkers);//点聚合的动画AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);MyAnimationListener myAnimationListener = new MyAnimationListener(removeMarkers);for (Marker marker : removeMarkers) {marker.setAnimation(alphaAnimation);marker.setAnimationListener(myAnimationListener);marker.startAnimation();}//便利一下数据类然后开始添加我们的点for (Cluster cluster : clusters) {addSingleClusterToMap(cluster);}}private void addSingleClusterToMap(Cluster cluster) {MyLoge.addLoge("addSingleClusterToMap", cluster.getClusterItems().get(cluster.getClusterCount() - 1).getUrl() + "    -=-=-=  " + cluster.getClusterCount());LatLng latlng = cluster.getCenterLatLng();MarkerOptions markerOptions = new MarkerOptions();markerOptions.anchor(0.5f, 0.5f).icon(getBitmapDes(cluster.getClusterCount(), cluster.getClusterItems().get(cluster.getClusterCount() - 1).getUrl())).position(latlng);Marker marker = mAMap.addMarker(markerOptions);marker.setAnimation(mADDAnimation);marker.setObject(cluster);marker.startAnimation();cluster.setMarker(marker);mAddMarkers.add(marker);}private BitmapDescriptor getBitmapDes(int num, int url) {final BitmapDescriptor[] bitmapDescriptor ;if (bitmapDescriptor[0] == null) {customizeMarkerIcon(url, new OnMarkerIconLoadListener() {@Overridepublic void markerIconLoadingFinished(View view) {//把view转橙bitmapbitmapDescriptor[0] = BitmapDescriptorFactory.fromView(view);}});}return bitmapDescriptor[0];}//自定义头像
private void customizeMarkerIcon(int url, OnMarkerIconLoadListener listener) {//头像的布局final View markerView = LayoutInflater.from(mContext).inflate(R.layout.amap_head_layout, null);final YYCodeImageView friendTouxiang = markerView.findViewById(R.id.img);final ImageView icon = markerView.findViewById(R.id.icon);//皇冠的图标RelativeLayout putongHead = markerView.findViewById(R.id.putongHead);RelativeLayout chat_head = markerView.findViewById(R.id.chat_head);RelativeLayout waimai_layout = markerView.findViewById(R.id.waimai_layout);putongHead.setVisibility(View.VISIBLE);chat_head.setVisibility(View.GONE);waimai_layout.setVisibility(View.GONE);icon.setVisibility(View.VISIBLE);icon.setImageResource(R.drawable.map_icon_emoticon_insensitivity);friendTouxiang.getBigCircleImageView().setImageResource(url);//头像完成以后走这个头像完成的监听listener.markerIconLoadingFinished(markerView);}//marker加载完成的回调
private interface OnMarkerIconLoadListener {void markerIconLoadingFinished(View view);}

再看一下mark的点击事件

  //点击事件@Overridepublic boolean onMarkerClick(Marker arg0) {if (mClusterClickListener == null) {return true;}Cluster cluster = (Cluster) arg0.getObject();if (cluster != null) {// cluster.getClusterItems()   点击的那个点的数据mClusterClickListener.onClick(arg0, cluster.getClusterItems());return true;}return false;}

然后我们就来插入假数据看看点聚合的效果在地图加载完成的监里面进行添加点这里随机了100个点，然后2种样式的图片

 @Overridepublic void onMapLoaded() {//添加测试数据new Thread() {public void run() {List<ClusterItem> items = new ArrayList<ClusterItem>();//随机10000个点for (int i = 0; i < 100; i++) {double lat = Math.random() + 39.474923;double lon = Math.random() + 116.027116;LatLng latLng = new LatLng(lat, lon, false);RegionItem  regionItem;int index = i%2;MyLoge.addLoge("inidsdokookoko",index+"   index-=-=-");if (index == 0) {regionItem = new RegionItem(latLng,"test" + i, R.drawable.test_video_bj);}else {regionItem = new RegionItem(latLng,"test" + i, R.drawable.wbf_test_img_two);}items.add(regionItem);}mClusterOverlay = new ClusterOverlay(mAMap, items,dp2px(WbfTestThreeActivity.this, clusterRadius),WbfTestThreeActivity.this);
//                mClusterOverlay.setClusterRenderer(WbfTestThreeActivity.this);mClusterOverlay.setOnClusterClickListener(WbfTestThreeActivity.this);}}.start();}

这个就是回调的点击事件，就是点击每个头像的点击事件clusterItems这个东西是一个集合可以拿到集合的，点击一个地图上的mark，clusterItems这个集合的长度是多少你就可以知道这个mark聚合了多少个点

 @Overridepublic void onClick(Marker marker, List<ClusterItem> clusterItems) {MyLoge.addLoge("ClusterItem111111",clusterItems.size()+"    -=--=-=    "+clusterItems.get(clusterItems.size()-1).getUrl());}

添加点的时候我们取的是集合的最后一项的图片显示的，所以我们上面的监听的事件也就是取的clusterItems集合的最后一项。

下面放一个我的源码包

Android高德地图自定义Mark并实现聚合效果相关推荐

Android高德地图自定义Markers的例子
下文为各位重点介绍关于Android高德地图自定义Markers的例子,希望这篇文章能够让各位理解到Android高德地图自定义Markers的方法. 之前的博客里说了地图的嵌入和定位,今天就说说在地 ...
Android 高德地图自定义线路规划选择方案之后按照方案进行导航
Android 高德地图自定义线路规划选择方案之后按照方案进行导航因为我这边导航需求的问题,导致我这边不能使用高德地图官方的线路规划和导航.所以我这边线路规划和导航界面都是根据高德地图那边给的api ...
Android高德地图自定义地图指南针
高德地图的指南针默认位置在地图的左上角,并且位置不可以修改.我们可以自定义一个指南针. 效果如下图 1.在布局文件定义一个ImageView <ImageView android:id=&quo ...
android高德地图自定义图层,自定义图层-图层-教程-地图 JS API | 高德地图API
自定义图层 CustomLayer 自定义图层是完全由开发者指定绘制方法的图层.该图层可以是 canvas.svg.甚至可以是 dom 组成的图层. JSAPI 能够实现自定义图层与高德地图的同步平移 ...
android高德地图自定义地图,Android实现高德地图自定义样式
放置Android工程下的assets文件夹,在assets文件夹里面创建了一个styleMap子文件夹.将里面的文件写到sd卡中. 写出文件代码: try { // 先获取系统默认的文档存放根目录 ...
android呼吸灯动画,Android高德地图自定义定位蓝点实现呼吸灯功能
还是先上个图吧: cluster.gif 说下实现的原理,首先这个定位小蓝点是由两张图片组成的,最底层的一张白色圆形图片以及上一层的蓝色圆形图片,只要不停的对蓝色图片进行透明度动画操作就可以实现这个效 ...
android高德地图自定义地图,(android地图开发) 高德地图自定义对话框
截图效果: 布局文件: android:layout_width="fill_parent" android:layout_height="fill_parent&quo ...
Android 高德地图自定义Location小蓝点
设置自定义定位蓝点自定义Location小蓝点,自定义功能 private static final int STROKE_COLOR = Color.argb(180, 3, 145, 255); ...
android高德地图自定义图层,自定义图层-Canvas
自定义图层 html,body,#container { width: 100%; height: 100%; } var map = new AMap.Map('container', { cent ...

Android高德地图自定义Mark并实现聚合效果

Android高德地图自定义Mark并实现聚合效果

Android高德地图自定义Mark并实现聚合效果相关推荐

最新文章

热门文章