百度地圖開發之點聚合功能

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

從上面的這幾張效果圖，大家可以看到其實就是將一個區域內的點 ?聚合到一起，然后縮放可以改變區域內點顯示效果。對于數據量比較大的功能來講，顯示效果會比較直觀。

這個功能在百度地圖的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 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(this, mBaiduMap);

// 添加Marker點

addMarkers();

// 設置地圖監聽，當地圖狀態發生改變時，進行點聚合運算

mBaiduMap.setOnMapStatusChangeListener(mClusterManager);

// 設置maker點擊時的響應

mBaiduMap.setOnMarkerClickListener(mClusterManager);

mClusterManager.setOnClusterClickListener(new ClusterManager.OnClusterClickListener() {

@Override

public boolean onClusterClick(Cluster cluster) {

Toast.makeText(MarkerClusterDemo.this,

"有" + cluster.getSize() + "個點", Toast.LENGTH_SHORT).show();

return false;

}

});

mClusterManager.setOnClusterItemClickListener(new ClusterManager.OnClusterItemClickListener() {

@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 items = new ArrayList();

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() {

@Override

public boolean onClusterClick(Cluster cluster) {

float level = mBaiduMap.getMapStatus().zoom;

mBaiduMap.setMapStatus(MapStatusUpdateFactory.newMapStatus(new MapStatus.Builder().zoom(level+1).build()));

return false;

}

});

這個我是點擊聚合圓圈的時候 ，將地圖級別放大一級，具體你們產品要求是什么樣，自己在監聽實現就好

3.設置聚合點圓圈樣式

這個樣式背景修改是在text_bubble.xml里面

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/map_circle_bg"

android:orientation="vertical">

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"/>

上面的??android:background="@drawable/map_circle_bg" ?這個就是自己定義的樣式，我這個是寫了一個帶背景色的圓形

map_circle_bg.xml

xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="oval"

android:useLevel="false" >

android:color="@color/green_theme" />

android:height="6dp" />

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

4.設置點擊 mark點 彈出pop提示框

mClusterManager.setOnClusterItemClickListener(new ClusterManager.OnClusterItemClickListener() {

@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

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。