Hello馍刮，大家好信夫，郭老司機又來話癆啦((/- -)/。作為一個芝麻信用分762的窮苦青年，本想著静稻，終于可以在支付寶上警没，光明正大的勾搭坦誠相見的妹子們，誰知道被和諧了振湾，互聯(lián)網套路啊(ノ?益?)ノ彡┻━┻杀迹。
算了，還是聊今天我們要說的押搪，支付寶的“到位”功能树酪。新版支付寶上方第四個tab，傳聞丈母娘足不出戶大州，同城招女婿的神兵利器续语。反正上面那些一塊錢看看花、逛逛街厦画、喝喝酒的服務好單純好不做作<(￣ˇ￣)/绵载。
我是DEMO： https://github.com/CarGuo/LbsMap 用力戳♂起來。
到位的主要特色是地圖加LBS功能苛白，搜索周邊的服務和幫忙，既然是地圖焚虱，我們就站在百度的肩膀來開車吧：
- 百度地圖的基本功能：地圖购裙，Marker，聚合鹃栽。
- 百度地圖的LBS功能躏率。
- 圖片Icon的下載與Marker更新。
1民鼓、基礎地圖功能
首先你得有個KEY薇芝，在百度地圖API上注冊為開發(fā)者后，你就可以創(chuàng)建一個應用丰嘉，記得選Android類型夯到，因為默認是服務器類型。
之后在AndroidManifest上加上下面這些（網絡饮亏、定位權限的就不需要列出了吧）耍贾，最后在APPlication中初始化SDKInitializer.initialize(this);，這樣你的的MapView就可以跑起來啦路幸！
<service
android:name="com.baidu.location.f"
android:enabled="true"
android:process=":remote" />
<meta-data
android:name="api_key"
android:value="CirU5l4MGVbE59tOduYDCO6TDX27CPzV" />
<meta-data
android:name="com.baidu.lbsapi.API_KEY"
android:value="CirU5l4MGVbE59tOduYDCO6TDX27CPzV" />
2荐开、初始化地圖
雖然用的是MapView，但是實際上操作的简肴，是MapView里面的BaiduMap晃听。
下方長♂代碼走起，流程是：比例尺；不要傾角能扒；不要旋轉佣渴；設置最大和最小的縮放層級；初始化聚合管理器（后面都是他的事情）赫粥；Marker（地圖上對應的item）管理器观话；設置顯示位置的圖標； 初始化我們需要的搜索Model（經緯度越平，半徑频蛔，表id）用與保存搜索狀態(tài)。是不是很簡單秦叛，哇塞晦溪，我有一個地圖了。
mBaiduMap = mBaiduMapView.getMap();
// 比例尺控件
mBaiduMapView.showScaleControl(true);
// 縮放控件
mBaiduMapView.showZoomControls(false);
// 百度地圖LoGo -> 正式版切記不能這么做挣跋，本人只是覺得logo丑了
mBaiduMapView.removeViewAt(1);
//不傾斜
mBaiduMap.getUiSettings().setOverlookingGesturesEnabled(false);
//不旋轉
mBaiduMap.getUiSettings().setRotateGesturesEnabled(false);
//設置縮放層級
mBaiduMap.setMaxAndMinZoomLevel(19, 12);
//圖標管理器
mMarkerManager = new MarkerManager(mBaiduMap);
//聚合與渲染管理器
mClusterManager = new ClusterManager<>(this, mBaiduMap, mMarkerManager);
mBaiduMap.setOnMapStatusChangeListener(mClusterManager);
mBaiduMap.setOnMapLoadedCallback(this);
mBaiduMap.setMyLocationEnabled(true);
Bitmap bitmap = CommonUtil.getImageFromAssetsFile(DemoApplication.getApplication(), "current_location.png");
//調整位置圖片三圆，類似百度地圖的小藍點
float scale = 0.80f;
Matrix matrix = new Matrix();
matrix.postScale(scale, scale);
mCLBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
bitmap.recycle();
BitmapDescriptor bitmapDescriptor = BitmapDescriptorFactory.fromBitmap(mCLBitmap);
MyLocationConfiguration myLocationConfiguration = new MyLocationConfiguration(MyLocationConfiguration.LocationMode.NORMAL, false, bitmapDescriptor);
mBaiduMap.setMyLocationConfigeration(myLocationConfiguration);
//顯示位置圖標的builder
MyLocationData locData = new MyLocationData.Builder()
.accuracy(0)
.direction(0).latitude(llat)
.longitude(llng).build();
//顯示位置圖標-珠海
mBaiduMap.setMyLocationData(locData);
//顯示等級-轉換：初始化為mDefaultRadius半徑的層級用于顯示
float level = LocationLevelUtils.returnCurZoom(mDefaultRadius);
//當前地圖狀態(tài)
mCurrentMapStatus = new MapStatus.Builder().target(new LatLng(llat, llng)).zoom(level).build();
mBaiduMap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(mCurrentMapStatus));
//初始化數據搜索model
mSearchModel = new SearchModel();
mSearchModel.setGps(llng + "," + llat);
mSearchModel.setRadius(mDefaultRadius);
mSearchModel.setLevel(level);
mSearchModel.setTableId(DemoApplication.TABLE_ID());
2、修改百度地圖demo源碼
初始化好地圖避咆，那么我們需要的是舟肉，在地圖上顯示圖標，并且將臨近的點聚合起來查库。百度地圖的DEMO已經實現了這一點路媚，但是還不夠我們的需求，這是時候我們要修改Demo下樊销，clusterutil路徑下的類整慎，針對聚合與Marker的顯示做自定義處理。
1）围苫、ClusterItem
這個接口代表著地圖上一個item裤园，但是的百度Demo還不夠，所以在里面加入新接口剂府，用于顯示我們的自定圖標拧揽，然后實現ClusterBaiduItem繼承ClusterItem，將需要顯示的經緯度和圖標信息腺占，保存在Item里强法。
/**
* 網絡的單個marker的實例
*/
BitmapDescriptor getUrlMarkerIconBitmapDescriptor(boolean select);
/**
* 網絡的單個marker的icon路徑
*/
String getUrlLocalMarkerIconPath();
/**
* 網絡的單個聚合的icon路徑
*/
String getUrlClusterIconPath();
2）、ClusterManager
這是聚合marker的管理器湾笛，內部有渲染類饮怯，將ICON渲染到地圖上，同時也包含了地圖狀態(tài)變化的接口嚎研，這里我們把地圖的狀態(tài)變化接口回調出來蓖墅，方便我們監(jiān)聽地圖的移動和縮放库倘。
同時對渲染類DefaultClusterRenderer也增加get接口，因為后面我們需要论矾，在外部動態(tài)改變Marker的圖標教翩。地圖上渲染出來的Marker在Render渲染類中，會以ClusterItem為KEY贪壳，緩存在MAP中饱亿。
//add myself 修改了地圖狀態(tài)變化的回調
public BaiduMap.OnMapStatusChangeListener onMapStatusChangeListener;
/**
* add myself
*/
public DefaultClusterRenderer<T> getDefaultClusterRenderer() {
return (DefaultClusterRenderer) mRenderer;
}
3）、NonHierarchicalDistanceBasedAlgorithm
這個類主要關注MAX_DISTANCE_AT_ZOOM闰靴，它代表著多遠的距離可以聚合彪笼，這里個人修改為200，反正我就不喜歡堆在一起╮(╯_╰)╭蚂且。
4）配猫、DefaultClusterRenderer
這是大頭，很大的頭杏死，默認渲染類泵肄，當然你可以自己實現，但是秉承著快速（懶）開發(fā)的原則淑翼，我是直接在上面修改的：
- 修改 makeClusterBackground方法腐巢，把其中的聚合背景效果，替換為我們自定義的背景效果 玄括。
- 修改makeSquareTextView方法冯丙， 讓聚合ICON顯示的我們自己的數字文本。
- 修改getClusterText方法惠豺， 顯示我們需要的數字邏輯。
- onBeforeClusterRendered 聚合圖標的渲染在這里開始风宁，我們可以修改成我們的邏輯洁墙。
- perform 這是展示地圖上Marker的方法，在這里修改加載邏輯戒财，讓Marker支持顯示我們的動態(tài)圖標热监。
顯示Marker的修改，是將原本只顯示drawable的功能饮寞，擴展到支持加載本地圖標的支持孝扛，后面我們只需要，把對應的Marker的圖標下載下來幽崩，就可以顯示不同的網絡ICON啦苦始。下方繼續(xù)長長長代碼(。??)ノ慌申。
//聚合背景修改為我們要的效果
private LayerDrawable makeClusterBackground() {
//讀取聚合圖標
InputStream inputStream;
inputStream = context.getResources().openRawResource(R.raw.cluster);
BitmapDrawable drawable = new BitmapDrawable(inputStream);
mColoredCircleBackground = drawable;
//將外部的圈圈去掉
ShapeDrawable outline = new ShapeDrawable(new RoundRectShape(mOuterCircle, mInsertCircle, null));
outline.getPaint().setColor(0x00000000);
LayerDrawable background = new LayerDrawable(new Drawable[]{outline, mColoredCircleBackground});
//修改padding
int strokeWidth = (int) (mDensity * 3);
background.setLayerInset(1, strokeWidth, strokeWidth, strokeWidth, strokeWidth);
return background;
}
/**
* 設置文本的樣式,修改為使用了TextView陌选，不用百度的SquareTextView
*/
private TextView makeSquareTextView(Context context) {
TextView squareTextView =
new TextView(context);
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams((int) (54 * mDensity), (int) (54 * mDensity));
squareTextView.setLayoutParams(layoutParams);
squareTextView.setId(R.id.text);
squareTextView.setGravity(Gravity.CENTER);
return squareTextView;
}
/**
* 設置文本的數字顯示
*/
protected String getClusterText(int bucket) {
if (bucket < BUCKETS[0]) {
return String.valueOf(bucket);
}
if (bucket > 999) {
bucket = 999;
return String.valueOf(bucket) + "+";
}
return String.valueOf(bucket);
}
//顯示渲染圖標，修改注釋部分代碼
private void perform(MarkerModifier markerModifier) {
if (!shouldRenderAsCluster(cluster)) {
/**如果此處沒有需要聚合的**/
for (T item : cluster.getItems()) {
Marker marker = mMarkerCache.get(item);
MarkerWithPosition markerWithPosition;
if (marker == null) {
MarkerOptions markerOptions = new MarkerOptions();
//markerOptions.animateType(MarkerOptions.MarkerAnimateType.grow);
/**
* 下面就是marker的顯示
*/
BitmapDescriptor bitmapDescriptor;
//如果有需要顯示的url icon的話，就顯示已下載的url Icon
if (!TextUtils.isEmpty(item.getUrlLocalMarkerIconPath()) && new File(item.getUrlLocalMarkerIconPath()).exists()) {
bitmapDescriptor = item.getUrlMarkerIconBitmapDescriptor(false);
if (bitmapDescriptor == null) {
bitmapDescriptor = item.getBitmapDescriptor();
}
} else {
bitmapDescriptor = item.getBitmapDescriptor();
}
···
onBeforeClusterItemRendered(item, markerOptions);
marker = mClusterManager.getMarkerCollection().addMarker(markerOptions);
markerWithPosition = new MarkerWithPosition(marker);
//根據 item 緩存marker
mMarkerCache.put(item, marker);
···
/**顯示聚合之前完善圖片信息**/
onBeforeClusterRendered(cluster, markerOptions);
····
}
5）咨油、IconGenerator
這個類主要是對應聚合Marker的您炉，這里修改了聚合圖標的大小，背景役电，文本樣式等等赚爵。其中setTextAppearance配置文本的樣式，如顏色法瑟，大小等冀膝，目前百度自帶Bubble.TextAppearance.Light和Bubble.TextAppearance.Dark，你也可以自己配置你需要的瓢谢。
3畸写、LBS數據請求
首先，你還是得有個女朋·····我呸氓扛，得是有個KEY枯芬，同樣是在百度地圖API，這次選擇的是服務端采郎，創(chuàng)建應用后千所，最底部可以選擇sn加密或者的ip白名單。
既然叫服務端蒜埋，一般這種工作都是服務器去做的淫痰，客戶端只需要從服務端拿數據就好。但是有時候服務端沒空理你（沒錯整份，就是不被理會的我）待错，你就需要直接從百度服務器扣了。
這里采用的是sn加密烈评，就是根據url火俄，通過申請到的ak和sk，還有各種請求參數讲冠，進行utf8轉化和md5加密瓜客，具體有興趣可以看看DEMO，雖然在客戶端這樣加密是沒有意義的竿开。
那么那我們就開始請求數據啦：
上方式一次請求中完整的url谱仪，其中：
- geosearch/v3/nearby 代表中附近檢索模式，其他的還有支持區(qū)域（城市否彩，全國疯攒，區(qū)）和矩形檢索模式。
- ak 代表的就是你的服務端申請的對應數據ak
- geotable_id 對應的是lbs數據的表名列荔，你可以通過數據管理后臺直接加數據卸例。
- page_index 頁數称杨，從0開始增蹭。
- page_size 每頁返回數據云挟，每頁最多50。
- location 檢索的中心點函喉。
- radiud 檢索的半徑呜舒。
- sn 加密后的sn锭汛。
其他的還有 有關鍵字q，標簽tag袭蝗，排序sort唤殴，過濾等：
- q 的檢索和熱詞分詞，具體能檢索到：設置的檢索字段到腥，地址朵逝，title等。
- tag 對應百度的tag字段乡范，全匹配配名，可以設置逗號，空格分開晋辆。
（以上兩個結合的話就是and關系喲渠脉，不是or關系） - sort排序只能排序int或者double的字段
- filter可以將檢索到的數據再過濾一遍，支持離線和區(qū)間瓶佳。
還有其他的就在百度官網了芋膘，再說下去真的就廢話了。
請求到數據后霸饲，lbs對應返回我們需要的json为朋，我們映射成需要的model，組裝ClusterBaiduItem并設置圖標厚脉，用于ClusterManager渲染习寸。
但是！Ｆ髡獭融涣！百度地圖Ｍarker不支持url童番！這就尷尬了精钮，所以我們還是乖乖自己下載吧┑(￣Д ￣)┍。
4剃斧、下載圖標
下載邏輯具體可看demo中的 ICONJob（真的好懶）轨香，主要的邏輯是：
- 根據URL生成對應md5的文件名字，如果文件存在幼东，就通知marker更新臂容。
- 文件不存在科雳，下載（MD5+tmp）名字的文件。
- 下載完之后判斷文件是否為圖片脓杉，是圖片的話就轉為需要大小的bitmp糟秘，然后保存大圖（文件名為MD5 + BIG）和小圖（文件名為MD5），大圖用來做點擊高亮球散，小圖用于正常顯示尿赚。
- 按照上面邏輯一張一張順序的下載ICON到本地。
這里主要是動態(tài)更新Marker的圖標邏輯：
根據下載成功的ICON對應的id蕉堰，找到對應的ClusterBaiduItem凌净，通過ClusterBaiduItem，在ClusterManager的DefaultClusterRenderer中拿到marker屋讶，修改marker的圖標冰寻，為我們下載成功的圖片，對應的一一更新皿渗，哇塞斩芭，好簡單。
for (ClusterBaiduItem clusterBaiduItem : mClusterBaiduItems) {
LBSModel lbsModel = clusterBaiduItem.getLBAModel();
//此處根據id設置對應的圖片
if (lbsModel.getUid() == e.geteId()) {
BitmapDescriptor bitmapDescriptor;
if (!TextUtils.isEmpty(clusterBaiduItem.getUrlLocalMarkerIconPath()) &&
new File(clusterBaiduItem.getUrlLocalMarkerIconPath()).exists()) {
bitmapDescriptor = clusterBaiduItem.getUrlMarkerIconBitmapDescriptor(false);
if (bitmapDescriptor == null) {
bitmapDescriptor = clusterBaiduItem.getBitmapDescriptor();
}
} else {
bitmapDescriptor = clusterBaiduItem.getBitmapDescriptor();
}
//從聚合管理器里面拿到marker羹奉，動態(tài)改變它
Marker marker = mClusterManager.getDefaultClusterRenderer().getMarker(clusterBaiduItem);
if (marker != null) {
marker.setIcon(bitmapDescriptor);
}
//刷新
mClusterManager.cluster();
return;
}
}
GIF效果
5秒旋、根據地圖狀態(tài)更新數據
在地圖移動和縮放的時候，因為地理信息改變了诀拭，需要更新數據迁筛，這時候可以通過setOnMapStatusChangeListener來監(jiān)聽地圖的變化。
- 首先如果沒有移動過耕挨，在移動開始的時候细卧，就保存當前最初狀態(tài)MapStatus，用來和后面的新的Status作對比筒占。
- 在狀態(tài)改變停止的時候贪庙，判斷是移動還是縮放。
- 如果是縮放翰苫，或者移動操作設定好的距離參數止邮，就進入等待請求數據，將保存的Status清空奏窑。
- 移動和縮放可能是連續(xù)性的导披，進入等待請求網絡會設定一個1秒多的延時。
- 如果一秒多沒有動作埃唯，就真正開始請求撩匕。
- 如果又發(fā)生了變化，那么就取消執(zhí)行請求墨叛，重新發(fā)起請求的等待止毕。
- 每個請求會設置一個UUID作為請求的TAG模蜡，在數據返回的時候，判斷這一波數據對應的TAG扁凛，是不是當前頁面最后發(fā)起的忍疾，如果是的話，就接受谨朝，如果不是膝昆，我要你何用╮(╯_╰)╭。
mClusterManager.setOnMapStatusChangeListener(new BaiduMap.OnMapStatusChangeListener() {
//記住變化前的上一個狀態(tài)
private MapStatus mFrontMapStatus;
@Override
public void onMapStatusChangeStart(MapStatus mapStatus) {
if (mFrontMapStatus == null) {
mFrontMapStatus = mapStatus;
}
}
@Override
public void onMapStatusChangeFinish(MapStatus mapStatus) {
//此處需要注意叠必，如果是進入的時候重新定位了地址荚孵，或者進入后在改變地圖狀態(tài)，可能也會進入這里
if (mHadRequest) {
if (StatusChangeLogic(mFrontMapStatus, mapStatus)) {//處理移動與放大
mFrontMapStatus = null;
}
}
mCurrentMapStatus = mapStatus;
}
});
/**
* 地圖因為操作而發(fā)生了狀態(tài)改變
*/
private boolean StatusChangeLogic(MapStatus frontMapStatus, MapStatus mapStatus) {
//重新確定搜索半徑的中心圖標
mSearchModel.setGps(mapStatus.bound.getCenter().longitude + "," + mapStatus.bound.getCenter().latitude);
//重新確定層級
mSearchModel.setLevel(mapStatus.zoom);
if (frontMapStatus == null)
return false;
//得到屏幕的距離大小
double areaLength1 = DistanceUtil.getDistance(mapStatus.bound.northeast, mapStatus.bound.southwest);
//計算屏幕的大小半徑
int radius = (int) areaLength1 / 2;
//重新確定搜索的半徑
mSearchModel.setRadius(radius);
if (frontMapStatus.zoom == mapStatus.zoom) {
if (frontMapStatus.bound == null)
return false;
//如果是移動了纬朝，得到距離
double moveLenght = DistanceUtil.getDistance(frontMapStatus.bound.getCenter(), mapStatus.bound.getCenter());
//如果移動距離大于屏幕的檢索半徑收叶，請求數據
if (moveLenght >= radius) {
RequestNewDataLogic(true, true);
return true;
}
//如果經緯度發(fā)生變化了，一般都是切換的城市之類的
if (mChangeStatus != null && (mapStatus.target.latitude) != (int) (mChangeStatus.target.latitude)
&& (int) (mapStatus.target.longitude) != (int) (mChangeStatus.target.longitude) && mIsChangeCity) {
RequestNewDataLogic(true, true);
mIsChangeCity = false;
return true;
}
return false;
} else {
//如果是縮放的話共苛，地圖層級發(fā)生改變判没，重新請求數據
RequestNewDataLogic(true, true);
return true;
}
}
5、點擊放大Marker
效果：
點擊放大隅茎，其實也是動態(tài)改變marker的圖標澄峰，根據ClusterBiaduItem拿到對應的marker，設置為大圖選中的Bitmap辟犀，廢話不說俏竞，下方擼碼。
//恢復上一個點擊為正常狀態(tài)
if (mPreClickItem != null) {
mPreClickItem.setBitmapId(R.drawable.default_map_icon);
BitmapDescriptor bitmapDescriptor;
//是否已經下載了ICON
if (!TextUtils.isEmpty(mPreClickItem.getUrlLocalMarkerIconPath()) &&
new File(mPreClickItem.getUrlLocalMarkerIconPath()).exists()) {
bitmapDescriptor = mPreClickItem.getUrlMarkerIconBitmapDescriptor(false);
if (bitmapDescriptor == null) {
bitmapDescriptor = mPreClickItem.getBitmapDescriptor();
}
} else {
bitmapDescriptor = mPreClickItem.getBitmapDescriptor();
}
//從聚合管理器里面拿到marker堂竟，動態(tài)改變它
Marker marker = mClusterManager.getDefaultClusterRenderer().getMarker(mPreClickItem);
if (marker != null) {
marker.setIcon(bitmapDescriptor);
}
}
//設置新的點擊為大圖狀態(tài)
if (clusterBaiduItem != null) {
clusterBaiduItem.setBitmapId(R.drawable.default_map_icon_big);
BitmapDescriptor bitmapDescriptor;
//是否已經下載了ICON
if (!TextUtils.isEmpty(clusterBaiduItem.getUrlLocalMarkerIconPath()) &&
new File(clusterBaiduItem.getUrlLocalMarkerIconPath()).exists()) {
bitmapDescriptor = clusterBaiduItem.getUrlMarkerIconBitmapDescriptor(true);
if (bitmapDescriptor == null) {
bitmapDescriptor = clusterBaiduItem.getBitmapDescriptor();
}
} else {
bitmapDescriptor = clusterBaiduItem.getBitmapDescriptor();
}
//從聚合管理器里面拿到marker魂毁，動態(tài)改變它
Marker marker = mClusterManager.getDefaultClusterRenderer().getMarker(clusterBaiduItem);
if (marker != null) {
marker.setIcon(bitmapDescriptor);
}
//刷新
mClusterManager.cluster();
}
mPreClickItem = clusterBaiduItem;
6、點擊聚合Marker出嘹，展開聚合到屏幕大小圖層
效果：
點擊聚合展開席楚，其實很簡單！<(￣︶￣)>税稼，將聚合的ClusterBaiduItem烦秩，用LatLngBounds.Builder ,將經緯度收集起來，之后通過MapStatusUpdateFactory生成新的mapstatus郎仆，BiaduMap使用animateMapStatus即可展開咯只祠。
if (mBaiduMap == null) {
return;
}
if (clusterBaiduItems.getItems().size() > 0) {
LatLngBounds.Builder builder = new LatLngBounds.Builder();
for (ClusterBaiduItem clusterBaiduItem : clusterBaiduItems.getItems()) {
builder.include(clusterBaiduItem.getPosition());
}
mBaiduMap.animateMapStatus(MapStatusUpdateFactory
.newLatLngBounds(builder.build()));
}
這里大致上就是實現到位圖標的粗糙邏輯，最后還是通過DEMO擼起來丸升，會更有感覺<(￣ˇ￣)/铆农。
我是DEMO： https://github.com/CarGuo/LbsMap 用戶戳♂起來牺氨。
最后
- 需要注意的狡耻，sn校驗的時候墩剖，需要注意請求參數的tag，q夷狰，filter中的逗號岭皂，‘&’，‘|’沼头，‘/’d爷绘，空格等分割特殊符號的處理，不然很容易檢驗失敗进倍。
- 數據的返回土至，不一定是你要50就返回50，因為有增量更新的同步問題猾昆，所以有時候數據被刪除后陶因，可能會導致某一頁只返回49等50以下的數量。
- 最好不要開啟效果顯示Marker垂蜗，因為Marker多了楷扬，會很卡，你可以針對某一個Marker去執(zhí)行動畫贴见，具體有drop,grow烘苹。
- 切換城市等經緯度變化，也會使得地圖的MapStatus的回調發(fā)生改變片部，這時候注意镣衡，不要因為觸發(fā)了縮放移動地圖的請求，你又主動發(fā)起了請求档悠，從而同時產生兩個請求喲捆探。
- 如果使用百度定位，注意定位可能同時進入回調幾次站粟，注意不要因此發(fā)起好幾次請求喲黍图。
個人Github：https://github.com/CarGuo
愁啊
