若含有違法違規等不良內容，請聯繫客服舉報！

Android利用百度地圖實現支付寶“到位”功能（地圖模式）

。

2017-05-18 13:37:14 明月已售次關注次

原價：~~167~~RMB普通會員：19.9月VIP會員：免費年VIP會員：免費SVIP會員：免費

前往下載技術諮詢升級VIP

付費安裝搭建

付費遠程教學

付費二次開發

付費BUG修復

特別聲明：本站資源來源於互聯網，版權歸原作者所有，所有資源僅供參考學習，如有其他需求，建議購買正版！

利用百度地圖快速實現支付寶的“到位”功能。基於LBS精確獲取地理位置的周邊數據，地圖動態顯示網絡圖標支持多點聚合與分離，點擊圖標動態放大選中效果，移動、放大、縮小地圖後重新更新數據，聚合圖標點擊動畫展開，根據實際距離調整地圖層級爲屏幕大小，分頁刷新。到位的主要特色是地圖加LBS功能，搜索周邊的服務和幫忙，既然是地圖，我們就站在百度的肩膀來開車吧：百度地圖的基本功能：地圖，Marker，聚合。百度地圖的LBS功能。圖片Icon的下載與Marker更新。1、基礎地圖功能　　首先你得有個KEY，在百度地圖API上註冊爲開發者後，你就可以創建一個應用，記得選Android類型，因爲默認是服務器類型。　之後在AndroidManifest上加上下面這些（網絡、定位權限的就不需要列出了吧），最後在APPlication中初始化SDKInitializer.initialize(this);，這樣你的的MapView就可以跑起來啦！

2、初始化地圖　　雖然用的是MapView，但是實際上操作的，是MapView裏面的BaiduMap。　下方長♂代碼走起，流程是：比例尺；不要傾角；不要旋轉；設置最大和最小的縮放層級；初始化聚合管理器（後面都是他的事情）；Marker（地圖上對應的item）管理器；設置顯示位置的圖標；初始化我們需要的搜索Model（經緯度，半徑，表id）用與保存搜索狀態。是不是很簡單，哇塞，我有一個地圖了。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);//顯示位置圖標的builderMyLocationData locData = new MyLocationData.Builder() .accuracy(0) .direction(0).latitude(llat) .longitude(llng).build();//顯示位置圖標-珠海mBaiduMap.setMyLocationData(locData);//顯示等級-轉換：初始化爲mDefaultRadius半徑的層級用於顯示float level = LocationLevelUtils.returnCurZoom(mDefaultRadius);//當前地圖狀態mCurrentMapStatus = new MapStatus.Builder().target(new LatLng(llat, llng)).zoom(level).build();mBaiduMap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(mCurrentMapStatus));//初始化數據搜索modelmSearchModel = 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渲染到地圖上，同時也包含了地圖狀態變化的接口，這裏我們把地圖的狀態變化接口回調出來，方便我們監聽地圖的移動和縮放。　同時對渲染類DefaultClusterRenderer也增加get接口，因爲後面我們需要，在外部動態改變Marker的圖標。地圖上渲染出來的Marker在Render渲染類中，會以ClusterItem爲KEY，緩存在MAP中。//add myself 修改了地圖狀態變化的回調public BaiduMap.OnMapStatusChangeListener onMapStatusChangeListener;/** * add myself */public DefaultClusterRenderer getDefaultClusterRenderer() { return (DefaultClusterRenderer) mRenderer;}3）、NonHierarchicalDistanceBasedAlgorithm　這個類主要關注MAX_DISTANCE_AT_ZOOM，它代表着多遠的距離可以聚合，這裏個人修改爲200，反正我就不喜歡堆在一起╮(╯_╰)╭。4）、DefaultClusterRenderer　這是大頭，很大的頭，默認渲染類，當然你可以自己實現，但是秉承着快速（懶）開發的原則，我是直接在上面修改的：修改 makeClusterBackground方法，把其中的聚合背景效果，替換爲我們自定義的背景效果。修改makeSquareTextView方法，讓聚合ICON顯示的我們自己的數字文本。修改getClusterText方法，顯示我們需要的數字邏輯。onBeforeClusterRendered 聚合圖標的渲染在這裏開始，我們可以修改成我們的邏輯。perform 這是展示地圖上Marker的方法，在這裏修改加載邏輯，讓Marker支持顯示我們的動態圖標。　顯示Marker的修改，是將原本只顯示drawable的功能，擴展到支持加載本地圖標的支持，後面我們只需要，把對應的Marker的圖標下載下來，就可以顯示不同的網絡ICON啦。下方繼續長長長代碼(。・・)ノ。//聚合背景修改爲我們要的效果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，這次選擇的是服務端，創建應用後，最底部可以選擇sn加密或者的ip白名單。　既然叫服務端，一般這種工作都是服務器去做的，客戶端只需要從服務端拿數據就好。但是有時候服務端沒空理你（沒錯，就是不被理會的我），你就需要直接從百度服務器扣了。　這裏採用的是sn加密，就是根據url，通過申請到的ak和sk，還有各種請求參數，進行utf8轉化和md5加密，具體有興趣可以看看DEMO，雖然在客戶端這樣加密是沒有意義的。那麼那我們就開始請求數據啦：[url]http://api.map.baidu.com/geosearch/v3/nearby?ak=r3sHA6uyjCwDvE838WGfvnPSpghTxi93&geotable_id=158714&page_index=1&page_size=20&location=113.583087,22.276012&radius=5000&sn=7e1dd255849414916373e9fe9856d555上方式一次請求中完整的url，其中：geosearch/v3/nearby 代表中附近檢索模式，其他的還有支持區域（城市，全國，區）和矩形檢索模式。ak 代表的就是你的服務端申請的對應數據akgeotable_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可以將檢索到的數據再過濾一遍，支持離線和區間。還有其他的就在百度官網了，再說下去真的就廢話了。　請求到數據後，lbs對應返回我們需要的json，我們映射成需要的model，組裝ClusterBaiduItem並設置圖標，用於ClusterManager渲染。　但是！！！百度地圖Ｍarker不支持url！這就尷尬了，所以我們還是乖乖自己下載吧┑(￣Д ￣)┍。4、下載圖標　下載邏輯具體可看demo中的 ICONJob（真的好懶），主要的邏輯是：根據URL生成對應md5的文件名字，如果文件存在，就通知marker更新。文件不存在，下載（MD5+tmp）名字的文件。下載完之後判斷文件是否爲圖片，是圖片的話就轉爲需要大小的bitmp，然後保存大圖（文件名爲MD5 + BIG）和小圖（文件名爲MD5），大圖用來做點擊高亮，小圖用於正常顯示。按照上面邏輯一張一張順序的下載ICON到本地。這裏主要是動態更新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，動態改變它 Marker marker = mClusterManager.getDefaultClusterRenderer().getMarker(clusterBaiduItem); if (marker != null) { marker.setIcon(bitmapDescriptor); } //刷新 mClusterManager.cluster(); return; }}GIF效果5、根據地圖狀態更新數據　　在地圖移動和縮放的時候，因爲地理信息改變了，需要更新數據，這時候可以通過setOnMapStatusChangeListener來監聽地圖的變化。首先如果沒有移動過，在移動開始的時候，就保存當前最初狀態MapStatus，用來和後面的新的Status作對比。在狀態改變停止的時候，判斷是移動還是縮放。如果是縮放，或者移動操作設定好的距離參數，就進入等待請求數據，將保存的Status清空。移動和縮放可能是連續性的，進入等待請求網絡會設定一個1秒多的延時。如果一秒多沒有動作，就真正開始請求。如果又發生了變化，那麼就取消執行請求，重新發起請求的等待。每個請求會設置一個UUID作爲請求的TAG，在數據返回的時候，判斷這一波數據對應的TAG，是不是當前頁面最後發起的，如果是的話，就接受，如果不是，我要你何用╮(╯_╰)╭。mClusterManager.setOnMapStatusChangeListener(new BaiduMap.OnMapStatusChangeListener() { //記住變化前的上一個狀態 private MapStatus mFrontMapStatus; @Override public void onMapStatusChangeStart(MapStatus mapStatus) { if (mFrontMapStatus == null) { mFrontMapStatus = mapStatus; } } @Override public void onMapStatusChangeFinish(MapStatus mapStatus) { //此處需要注意，如果是進入的時候重新定位了地址，或者進入後在改變地圖狀態，可能也會進入這裏 if (mHadRequest) { if (StatusChangeLogic(mFrontMapStatus, mapStatus)) {//處理移動與放大 mFrontMapStatus = null; } } mCurrentMapStatus = mapStatus; }});/** * 地圖因爲操作而發生了狀態改變 */private boolean StatusChangeLogic(MapStatus frontMapStatus, MapStatus mapStatus) { //重新確定搜索半徑的中心圖標 mSearchModel.setGps(mapStatus.bound.getCenter().longitude + "," + mapStatus.bound.getCenter().latitude); //重新確定層

內容加載中..

Android利用百度地圖實現支付寶“到位”功能（地圖模式）

相關推薦