百度地图开发之点聚合功能

分类：设计模式作者：编程之家用户

大家不清楚什么是点聚合，先上一下效果图。







从上面的这几张效果图，大家可以看到其实就是将一个区域内的点 聚合到一起，然后缩放可以改变区域内点显示效果。对于数据量比较大的功能来讲，显示效果会比较直观。


这个功能在百度地图的demo里面可以找到，但是我没有找到相关的文档说明...

具体实现方式 1.下载百度地图的demo

2.在demo中找到MarkerClusterDemo 这个类 具体逻辑参考这个类就行了。


贴出这个类的实现代码

package baidumapsdk.demo.map;

import android.app.Activity;
import android.os.Bundle;

import com.baidu.mapapi.clusterutil.clustering.Cluster;
import com.baidu.mapapi.clusterutil.clustering.ClusterItem;
import com.baidu.mapapi.clusterutil.clustering.ClusterManager;
import com.baidu.mapapi.map.BaiduMap;
import com.baidu.mapapi.map.BaiduMap.OnMapLoadedCallback;
import com.baidu.mapapi.map.BitmapDescriptor;
import com.baidu.mapapi.map.BitmapDescriptorFactory;
import com.baidu.mapapi.map.MapStatus;
import com.baidu.mapapi.map.MapStatusUpdateFactory;
import com.baidu.mapapi.map.MapView;
import com.baidu.mapapi.model.LatLng;

import java.util.ArrayList;
import java.util.List;

import android.widget.Toast;
import baidumapsdk.demo.R;

/**
 * 此Demo用来说明点聚合功能
 */
public class MarkerClusterDemo extends Activity implements OnMapLoadedCallback {

    MapView mMapView;
    BaiduMap mBaiduMap;
    MapStatus ms;
    private ClusterManager<MyItem> mClusterManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_marker_cluster_demo);
        mMapView = (MapView) findViewById(R.id.bmapView);
        ms = new MapStatus.Builder().target(new LatLng(39.914935,116.403119)).zoom(8).build();
        mBaiduMap = mMapView.getMap();
        mBaiduMap.setOnMapLoadedCallback(this);
        mBaiduMap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(ms));
        // 定义点聚合管理类ClusterManager
        mClusterManager = new ClusterManager<MyItem>(this,mBaiduMap);
        // 添加Marker点
        addMarkers();
        // 设置地图监听，当地图状态发生改变时，进行点聚合运算
        mBaiduMap.setOnMapStatusChangeListener(mClusterManager);
        // 设置maker点击时的响应
        mBaiduMap.setOnMarkerClickListener(mClusterManager);

        mClusterManager.setOnClusterClickListener(new ClusterManager.OnClusterClickListener<MyItem>() {
            @Override
            public boolean onClusterClick(Cluster<MyItem> cluster) {
                Toast.makeText(MarkerClusterDemo.this,"有" + cluster.getSize() + "个点",Toast.LENGTH_SHORT).show();

                return false;
            }
        });
        mClusterManager.setOnClusterItemClickListener(new ClusterManager.OnClusterItemClickListener<MyItem>() {
            @Override
            public boolean onClusterItemClick(MyItem item) {
                Toast.makeText(MarkerClusterDemo.this,"点击单个Item",Toast.LENGTH_SHORT).show();

                return false;
            }
        });
    }

    @Override
    protected void onPause() {
        mMapView.onPause();
        super.onPause();
    }

    @Override
    protected void onResume() {
        mMapView.onResume();
        super.onResume();
    }

    @Override
    protected void onDestroy() {
        mMapView.onDestroy();
        super.onDestroy();
    }

    /**
     * 向地图添加Marker点
     */
    public void addMarkers() {
        // 添加Marker点
        LatLng llA = new LatLng(39.963175,116.400244);
        LatLng llB = new LatLng(39.942821,116.369199);
        LatLng llC = new LatLng(39.939723,116.425541);
        LatLng llD = new LatLng(39.906965,116.401394);
        LatLng llE = new LatLng(39.956965,116.331394);
        LatLng llF = new LatLng(39.886965,116.441394);
        LatLng llG = new LatLng(39.996965,116.411394);

        List<MyItem> items = new ArrayList<MyItem>();
        items.add(new MyItem(llA));
        items.add(new MyItem(llB));
        items.add(new MyItem(llC));
        items.add(new MyItem(llD));
        items.add(new MyItem(llE));
        items.add(new MyItem(llF));
        items.add(new MyItem(llG));

        mClusterManager.addItems(items);

    }

    /**
     * 每个Marker点，包含Marker点坐标以及图标
     */
    public class MyItem implements ClusterItem {
        private final LatLng mPosition;

        public MyItem(LatLng latLng) {
            mPosition = latLng;
        }

        @Override
        public LatLng getPosition() {
            return mPosition;
        }

        @Override
        public BitmapDescriptor getBitmapDescriptor() {
            return BitmapDescriptorFactory
                    .fromResource(R.drawable.icon_gcoding);
        }
    }

    @Override
    public void onMapLoaded() {
        // TODO Auto-generated method stub
        ms = new MapStatus.Builder().zoom(9).build();
        mBaiduMap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(ms));
    }

}

基本的逻辑都在demo里面有所实现，我就不详细说了。 我说几点可能需要我们自己改动的一些细节。


1.地图级别

mBaiduMap.setMapStatus(MapStatusUpdateFactory.newMapStatus(new MapStatus.Builder().zoom(Float.parseFloat("10.8")).build()));//设置缩放级别


2.设置聚合圆圈的点击事件 
 mClusterManager.setOnClusterClickListener(new ClusterManager.OnClusterClickListener<BaiduItem>() {
            @Override
            public boolean onClusterClick(Cluster<BaiduItem> cluster) {
            	float level = mBaiduMap.getMapStatus().zoom;
            	mBaiduMap.setMapStatus(MapStatusUpdateFactory.newMapStatus(new MapStatus.Builder().zoom(level+1).build()));
                return false;
            }
        });

这个我是点击聚合圆圈的时候 ，将地图级别放大一级，具体你们产品要求是什么样，自己在监听实现就好


3.设置聚合点圆圈样式

这个样式背景修改是在text_bubble.xml里面

<?xml version="1.0" encoding="utf-8"?>
<!--
  ~ Copyright (C) 2015 Baidu,Inc. All Rights Reserved.
  -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.baidu.mapapi.clusterutil.ui.RotationLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/map_circle_bg"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:paddingBottom="5dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="5dp"/>

    </com.baidu.mapapi.clusterutil.ui.RotationLayout>

</LinearLayout>

上面的 android:background="@drawable/map_circle_bg" 这个就是自己定义的样式，我这个是写了一个带背景色的圆形

map_circle_bg.xml

<shape 
	xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false" >
    <solid android:color="@color/green_theme" />
    <solid
        android:color="@color/green_theme" />
    <size android:width="6dp"
          android:height="6dp" />
</shape>

颜色就自己改成自己的颜色就可以。


4.设置点击 mark点 弹出pop提示框

    mClusterManager.setOnClusterItemClickListener(new ClusterManager.OnClusterItemClickListener<BaiduItem>() {
            @Override
            public boolean onClusterItemClick(final BaiduItem item) {
                TextView tv = new TextView(getApplicationContext());  
                tv.setBackgroundResource(R.drawable.icon_pop);  
                tv.setGravity(Gravity.CENTER_VERTICAL);
                tv.setText(item.getName());
                //定义用于显示该InfoWindow的坐标点  
                LatLng pt = new LatLng(item.getPosition().latitude,item.getPosition().longitude);  
                //创建InfoWindow,传入 view， 地理坐标， y 轴偏移量 
                InfoWindow mInfoWindow = new InfoWindow(tv,pt,-47);  
                //显示InfoWindow  
                mBaiduMap.showInfoWindow(mInfoWindow);
                return false;
            }
        });


就是上面图三的提示框，这个需要注意的就是icon_pop这个图片用.9的图片，因为提示信息过多的时候可以自动适配。


5.设置修改marker点的 图片样式

大家看图中 我们的点出来的都是 红色和绿色的小房子，不是传统的 那种红色的小标注点

  @Override
    public BitmapDescriptor getBitmapDescriptor() {
    	if(state.equals("1")){
    		 return BitmapDescriptorFactory.fromResource(R.drawable.icon_map_wkg);
    	}else if(state.equals("2")){
    		 return BitmapDescriptorFactory.fromResource(R.drawable.icon_map_jg);
    	}else if(state.equals("3")){
    		 return BitmapDescriptorFactory.fromResource(R.drawable.icon_map_wkg);
    	}else{
    		 return BitmapDescriptorFactory.fromResource(R.drawable.icon_map_wkg);
    	}
    }

这个state是自己new这个对象的时候，构造里面传一个值进来，用不同的值判断显示不同的标注icon。


最后给大家放上一个demo，是eclipse版本的。as版本的 官网下载下来的就是as的demo。


DEMO下载


如果大家还有其它相关问题，可以加入我的qq群讨论交流：454430053

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

什么是设计模式？Design pattern--和生活结合更好理解
什么是设计模式一套被反复使用、多数人知晓的、经过分类编目的、代码 设计经验 的总结；使用设计模式是为了 可重用 代码、让代码 更容易 被他人理解、保证代码 可靠性；设计模式使代码编制  真正工程化；设计模式使软件工程的 基石脉络， 如同大厦的结构一样；并不直接用来完成代码的编写，而是 描述 在各种不同情况下，要怎么解决问题的一种方案；能使不稳定依赖于相对稳定、具体依赖于相对抽象，避免引
面向对象设计原则一——单一职责原则
单一职责原则定义（Single Responsibility Principle，SRP）一个对象应该只包含 单一的职责，并且该职责被完整地封装在一个类中。Every  Object should have  a single responsibility, and that responsibility should be entirely encapsulated by t
十分钟理解Java中的动态代理----强烈推荐
动态代理和CGLib代理分不清吗，看看这篇文章，写的非常好，强烈推荐。原文截图*************************************************************************************************************************原文文本************
适配器模式-让不兼容的接口得以适配
适配器模式将一个类的接口转换成客户期望的另一个接口，使得原本接口不兼容的类可以相互合作。
策略模式-定义一个算法族
策略模式定义了一系列算法族，并封装在类中，它们之间可以互相替换，此模式让算法的变化独立于使用算法的客户。
设计模式之高质量代码
设计模式讲的是如何编写可扩展、可维护、可读的高质量代码，它是针对软件开发中经常遇到的一些设计问题，总结出来的一套通用的解决方案。
模板方法模式-封装一套算法流程
模板方法模式在一个方法中定义一个算法的骨架，而将一些步骤延迟到子类中，使得子类可以在不改变算法结构的情况下，重新定义算法中的某些步骤。
迭代器模式-统一集合的遍历方式
迭代器模式提供了一种方法，用于遍历集合对象中的元素，而又不暴露其内部的细节。
外观模式-简化子系统的复杂性
外观模式又叫门面模式，它提供了一个统一的（高层）接口，用来访问子系统中的一群接口，使得子系统更容易使用。
单例模式的五种实现方式及优缺点
单例模式（Singleton Design Pattern）保证一个类只能有一个实例，并提供一个全局访问点。
组合模式-统一的处理个别对象与组合对象
组合模式可以将对象组合成树形结构来表示“整体-部分”的层次结构，使得客户可以用一致的方式处理个别对象和对象组合。
装饰者模式-动态的包装原有对象的行为
装饰者模式能够更灵活的，动态的给对象添加其它功能，而不需要修改任何现有的底层代码。
观察者模式-将消息通知给观察者
观察者模式（Observer Design Pattern）定义了对象之间的一对多依赖，当对象状态改变的时候，所有依赖者都会自动收到通知。
代理模式-访问对象的代理而非其本身
代理模式为对象提供一个代理，来控制对该对象的访问。代理模式在不改变原始类代码的情况下，通过引入代理类来给原始类附加功能。
工厂模式-将对象的创建封装起来
工厂模式（Factory Design Pattern）可细分为三种，分别是简单工厂，工厂方法和抽象工厂，它们都是为了更好的创建对象。
状态模式-将状态和行为封装成对象
状态模式允许对象在内部状态改变时，改变它的行为，对象看起来好像改变了它的类。
命令模式-将请求封装成对象
命令模式将请求封装为对象，能够支持请求的排队执行、记录日志、撤销等功能。
【设计模式】备忘录模式
备忘录模式（Memento Pattern）保存一个对象的某个状态，以便在适当的时候恢复对象。备忘录模式属于行为型模式。 基本介绍 **意图：**在不破坏封装性的前提下，捕获一个对象的内部状态，并在该
【设计模式】职责链模式
顾名思义，责任链模式（Chain of Responsibility Pattern）为请求创建了一个接收者对象的链。这种模式给予请求的类型，对请求的发送者和接收者进行解耦。这种类型的设计模式属于行为
【设计模式】享元模式
享元模式（Flyweight Pattern）（轻量级）（共享元素）主要用于减少创建对象的数量，以减少内存占用和提高性能。这种类型的设计模式属于结构型模式，它提供了减少对象数量从而改善应用所需的对象结
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot