做地圖社交類APP開發的都知道,一般情況下,為了整體的美觀和使用者體驗度,我們需要定製化Marker的樣式。本文中實現的方式都是基於高德地圖的,百度地圖也類似,大家可以照葫蘆畫瓢,廢話不多說,先來看看最終效果:

• 實現思路:
  先來看看高德官方提供的設定Marker圖示的方法:

我們可以看到setIcon()方法,裡面的引數BitmapDescriptor就是我們最終需要的東西。那麼到底該如何得到這個BitmapDescriptor物件呢,其實很簡單,該物件可以通過BitmapDescriptorFactory工廠類獲取,BitmapDescriptorFactory提供了以下方法來得到BitmapDescriptor物件:

/**
 * 1.通過資源id獲取
 */
public static BitmapDescriptor fromResource(int var0) {
        ......
}
/**
 * 2.通過自定義的view獲取
 */
 public static BitmapDescriptor fromView(View var0) {
    ...... 
}

/**
 * 3.通過具體路徑資源獲取
 */
 public static BitmapDescriptor fromPath(String var0) {
    ......
}

/**
 * 4.通過具體Assets資源獲取
 */
 

 public static BitmapDescriptor fromAsset(String var0) {
    ...... 
}
/**
 * 5.通過具體檔案獲取
 */
public static BitmapDescriptor fromFile(String var0) {
   ......
}

/**
 * 6.通過bitmap獲取
 */
 public static BitmapDescriptor fromBitmap(Bitmap var0) {
    ......

}

從以上官方提供的方法可以看到,得到BitmapDescriptor物件的方式有多種,我們可以根據自己需要自行選擇。但是,為了應對頻繁的需求變化,我們肯定要選擇更為動態,靈活的方式來應付我們的需求變化,我們就可以選擇fromView()和fromBitmap()兩種方式來得到BitmapDescriptor物件了。這裡選用fromBitmap()方式來得到BitmapDescriptor物件吧,因為採用fromView()方法獲取後有個巨坑,這個後面再說。

  如果我們要根據需求自定義Marker,當然是希望能夠讓它可大可小,可動可靜了,那就非view莫屬了。只要我們可以自定義view佈局,然後轉化成bitmap不就OK了嗎,好,說幹就幹,我們以自定義Makrer樣式並載入網路圖片為例,開幹!

1. 定製化Marker佈局,載入網路圖片:
   

   我們就以實現以下Marker的樣式為例:

這個樣式比較簡單,只要一個CircleImageView外面套一個固定的容器就可以了,直接看佈局程式碼:

marker_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="40dp"
    android:layout_height="47dp"
    android:layout_gravity="center">
    <RelativeLayout
        android:layout_width="40dp"
        android:layout_height="47dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:background="@mipmap/act_map_business_bg">
        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/marker_item_icon"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:src="@mipmap/userheadholder"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="1dp" />
    </RelativeLayout>

</RelativeLayout>

下面看一下程式碼中如何使用:

/**
     * by moos on 2017/11/13
     * func:定製化marker的圖示
     * @return
     */
    private void customizeMarkerIcon(String url, final OnMarkerIconLoadListener listener){
        final View markerView = LayoutInflater.from(this).inflate(R.layout.marker_bg,null);
        final CircleImageView icon = (CircleImageView) markerView.findViewById(R.id.marker_item_icon);

        Glide.with(this)
                .load(url+"!/format/webp")
                .asBitmap()
                .thumbnail(0.2f)
                .diskCacheStrategy(DiskCacheStrategy.NONE)
                .centerCrop()
                .into(new SimpleTarget<Bitmap>(){
                    @Override
                    public void onResourceReady(Bitmap bitmap, GlideAnimation glideAnimation) {
                        //待圖片載入完畢後再設定bitmapDes
                        icon.setImageBitmap(bitmap);
                        bitmapDescriptor = BitmapDescriptorFactory.fromBitmap(convertViewToBitmap(markerView));
                        listener.markerIconLoadingFinished(markerView);
                    }
                });

    }

......

/**
     * by moos on 2017/11/15
     * func:自定義監聽介面,用來marker的icon載入完畢後回撥新增marker屬性
     */
    public interface OnMarkerIconLoadListener{
        void markerIconLoadingFinished(View view);
    }

這部分程式碼也不是很難,我就簡單講講思路。首先載入佈局後,拿到裡面的控制元件CircleImageView,並使用常用的Glide圖片載入框架來載入網路圖片。可能會有人問,為什麼關閉Glide的快取設定呢?關注到這點的人還是比較細心的,我們使用glide載入大量marker佈局的時候,如果社會了快取選項,那麼就可能會出現相同圖片只顯示一張的狀況,這個如果不信的話可以自行實驗。下面來說說另一個問題,也就是剛剛我們為什麼選擇fromBitmap()而不是fromView()方法,因為之前用fromView()時發現新增的第一個marker並不會加載出圖片,而只是顯示預設的佔位圖。即使通過在Glide載入圖片的回撥方法onResourceReady()設定也依然無效,這個問題大家不信邪也可以試試看看,這就是最終為什麼選擇fromBitmap()方法的原因。這裡還使用了自定義的介面來傳入markerView,方便後面的二次開發,然後在回撥方法markerIconLoadingFinished()方法中設定marker的圖示。

1. 將view轉化為bitmap物件:

/**
     * by mos on 2017.11.13
     * func:view轉bitmap
     */
    public static Bitmap convertViewToBitmap(View view) {

        view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));

        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());

        view.buildDrawingCache();

        Bitmap bitmap = view.getDrawingCache();

        return bitmap;

    }

網上相關方法很多,這裡就不介紹了,有興趣可以去百度一下。

1. 批量新增自定義的Marker到地圖上:
   先來看看程式碼:

/**
     * by moos on 2017/11/15
     * func:新增marker到地圖上顯示
     */
    BitmapDescriptor bitmapDescriptor ;
    private void addMarker(final ImageNearBean.DataBean.ExhibitionListBean bean) {
        double lat;
        double lon;
        lat = bean.getLatitude();
        lon = bean.getLongitude();
        LatLng latLng = new LatLng(lat, lon, false);
        loge("新增maker前的型別為==="+bean.getUserType());

        String url = bean.getUserLogo();
        final MarkerOptions markerOptions = new MarkerOptions();
        markerOptions.setFlat(true);
        markerOptions.anchor(0.5f, 0.5f);
        markerOptions.position(new LatLng(lat, lon));
        customizeMarkerIcon(url, bean.getTeamName(),new OnMarkerIconLoadListener() {
            @Override
            public void markerIconLoadingFinished(View view) {
                //bitmapDescriptor = BitmapDescriptorFactory.fromView(view);
                markerOptions.icon(bitmapDescriptor);
                Marker marker;
                marker = mAMap.addMarker(markerOptions);
                //marker.setObject(cluster);
            }
        });

    }

    /**
     * by moos on 2017/11/15
     * func:批量新增marker到地圖上
     */
    private void addMarkersToMap(){

        runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        for(int i = 0;i<allBussinessBean.size();i++){
                          addMarker(allBussinessBean.get(i));
                        }
                    }
                });

    }

既然marker樣式定製完畢,BitmapDescriptor也拿到了,那麼下面就簡單了,應該就不需要我多說了,只要注意一點,批量新增marker一般比較耗時,儘量放在子執行緒處理。

  到這裡,自定義marker就實現了,這應該可以適用於多數情況了,一路看下來,是不是也挺簡單的,只要用心思考研究就好了,而且搞定後有很強的工作動力有木有!

  最後,大家有任何問題或者建議,歡迎留言或者加群討論,謝謝.

程式碼地址：https://github.com/Moosphan/AMapMarker-master此程式碼包含了自定義marker和marker的聚合功能,如果覺得對您有幫助,歡迎star~也同樣歡迎提出想法和需求來進一步完善它.