android高德地圖網路路徑實現自定義marker並點擊彈出自定義視窗

android中使用地圖的地方隨處可見，今天記錄一下網路路徑生成自定義marker，點擊標記彈出自定義的視窗(在這裡使用的是高德地圖) 在這裡我們使用Grilde去載入網路圖片，因為這個簡直太方便了！在android studio下，在app/build.gradle文件當中添加如下依賴： com ...

android中使用地圖的地方隨處可見，今天記錄一下網路路徑生成自定義marker，點擊標記彈出自定義的視窗(在這裡使用的是高德地圖)

在這裡我們使用Grilde去載入網路圖片，因為這個簡直太方便了！

在android studio下，在app/build.gradle文件當中添加如下依賴：

compile 'com.github.bumptech.glide:glide:3.7.0'

接下來就是代碼的實現部分

代碼註釋的比較詳細

/**
 * Created by Yyyyq on 2018/4/20 0009.
 *    根據網路路徑生成自定義marker,點擊彈出自定義窗體
 */

public class CustomMapActivity extends AppCompatActivity implements AMap.OnMarkerClickListener,
        AMap.InfoWindowAdapter,AMap.OnMapClickListener{


    //標題頭
    private TextView textView;
    //返回按鈕
    private ImageView back;

    private MapView mMapView;
    private AMap aMap;
    Marker marker;
    //指向當前的marker（用於控制infowindow顯示與消失）
    Marker nowMarker;
      
    SimpleVO tempSimpleVO;
   



    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custommap);
        mMapView = (MapView) findViewById(R.id.map);
        mMapView.onCreate(savedInstanceState);
        
        init();
        
        back=(ImageView)findViewById(R.id.back);
        textView = (TextView) findViewById(R.id.toolbar_title);
        Toolbar toolbar = (Toolbar) findViewById(R.id.activity_main_toolbar);
        textView.setText("生成網路圖片Marker");
        toolbar.setTitle("");
        setSupportActionBar(toolbar);
        setTranslucentBar();

        //返回按鈕
        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }
    
    private void init() {
        if (aMap == null) {
            aMap = mMapView.getMap();
            setUpMap();
            //獲取後臺數據源
            getDataSource();
           
        }
    }
    
    /**
     * 設置aMap屬性
     */
    private void setUpMap() {
        aMap.setOnMarkerClickListener(this);// 設置點擊marker事件監聽器
        aMap.setInfoWindowAdapter(this);//自定義彈出窗體
        aMap.setOnMapClickListener(this);//地圖點擊事件
    }
    
    /**
     * @Description:沉浸式標題
     */
    protected void setTranslucentBar() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window window = getWindow();
            // Translucent status bar
            window.setFlags(
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    }
  
  
    
    
    /**
     *在這裡模擬方法請求到數據源，可根據實際
     *    我們用自定義實體類SimpleVO接收數據源
     */
     private void getDataSource(){
            //網路請求 得到List
            List<SimpleVO> list="後臺傳遞的數據源";
            
            if(list.size()>0){
                //根據第一條數據經緯度經地圖移動到所視區域
                LatLng curLatlng = new LatLng(Double.parseDouble(list.get(0).getLatitude()),Double.parseDouble(list.get(0).getLongitude()));
                aMap.moveCamera(CameraUpdateFactory.newLatLngZoom(curLatlng, 14f));
                for(int i=0;i<list.size();i++){
                    final int j = i;
                    //利用強大的Glide載入圖片,可放占位符等，可百度Glide屬性
                    Glide.with(CustomMapActivity.this)
                        .load(list.get(i).getUrl())
                        .into(new SimpleTarget<GlideDrawable>(){
                            @Override
                            public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                                //展示圖片
                                View view = LayoutInflater.from(CustomMapActivity.this).inflate(
                                        R.layout.map_userimg, null);
                                RoundImageView imageView = (RoundImageView) view.findViewById(R.id.user_img);
                                tempSimpleVO=list.get(j);
                                imageView.setImageDrawable(resource);
                                Bitmap bitmap = convertViewToBitmap(view);
                                MarkerOptions markerOptions = new MarkerOptions();
                                markerOptions.anchor(0.5f, 1.0f);
                                markerOptions.position(new LatLng(Double.parseDouble(tempSimpleVO.getLatitude()),Double.parseDouble(tempSimpleVO.getLongitude())));
                                markerOptions.draggable(false);
                                markerOptions.title(tempSimpleVO.getName());
                                markerOptions.icon(BitmapDescriptorFactory.fromBitmap(bitmap));
                                marker = aMap.addMarker(markerOptions);
                                //把相應的對象賦給marker，adapter中通過這個對象給控制項賦值
                                marker.setObject(tempSimpleVO);
                            }
                        });



                }
            }

     }


    /**
     *  點擊marker彈出視窗
     *  返回true 地圖不移動中心點
     */
    @Override
    public boolean onMarkerClick(Marker marker) {
        nowMarker=marker;
        nowMarker.showInfoWindow();
        return true;
    }
    /**
     * 自定義視窗佈局
     */
    @Override
    public View getInfoWindow(Marker marker) {
        View infoContent = LayoutInflater.from(CustomMapActivity.this).inflate(
                R.layout.item_map_window, null);
        render(marker, infoContent,2);
        return infoContent; 
    }
    
    /**
     * 對視窗信息賦值
     */
    public void render(Marker marker, View view,int mark) {
        LinearLayout layout = (LinearLayout) view.findViewById(R.id.window_linearlayout);
        //設置透明度
        layout.getBackground().setAlpha(240);
        TextView name = (TextView) view.findViewById(R.id.window_name);
        TextView info = (TextView) view.findViewById(R.id.window_info);
        SimpleVO simpleVO = (SimpleVO) marker.getObject();
        name.setText(simpleVO.getName());
        info.setText(simpleVO.getInfo());
    }
    
    /**
     * 因自定義視窗 返回null
     */
    @Override
    public View getInfoContents(Marker marker) {
        return null;
    }

    /**
     *  重寫地圖點擊事件，點擊地圖任意點隱藏infowindow視窗
     */
    @Override
    public void onMapClick(LatLng latLng) {
        //隱藏infowindow視窗
        nowMarker.hideInfoWindow();
    }

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

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

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mMapView.onSaveInstanceState(outState);
    }

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


    /**
     * view轉bitmap
     */
    private 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;
    }



}

接下來就是主頁面的佈局　　activity_custommap

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--標題欄-->

        <android.support.v7.widget.Toolbar
            android:id="@+id/activity_main_toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:paddingTop="16dp"
            android:minHeight="?attr/actionBarSize"
            android:background="@color/bluestyle_button">
            <ImageView
                android:id="@+id/back"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginLeft="10dp"
                android:layout_gravity="center|left"
                android:src="@drawable/jiantouzuo"/>

            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textColor="#fff"
                android:textSize="18sp"/>
        </android.support.v7.widget.Toolbar>


    <com.amap.api.maps.MapView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

代碼中應用的實力類　　SimpleVO

public class SimpleVO {
    
    private String id;
    
    private String name;
    
    private String latitude;
    
    private String longitude;
    
    private String url;
    
    private String info;
    
    //省略get，set，toString方法，需自己導入


}

之後需要展示我們的自定義頭像　　map_userimg　　因為展示的是頭像，我們用到了圓形工具類，若沒有該工具類可查看複製上一篇隨筆，可直接粘貼複製

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center">


    <!--自定義圓形工具類-->
    <!--若沒有該工具類可賦值上一篇代碼，Ctrl+c Ctrl+v可用-->
    <com.bc.yyyyq.util.RoundImageView
        android:id="@+id/user_img"
        android:scaleType="fitCenter"
        android:layout_width="30dp"
        android:layout_height="30dp"/>



</LinearLayout>

最後我們需要展示我們自定義的marker的彈出窗體　　item_map_window

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/window_linearlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/brokermap_layout"
    android:padding="10dp"
    android:orientation="vertical">

    <!--姓名-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="姓名："
            android:textColor="#515151"
            android:textSize="14sp"/>
        <TextView
            android:id="@+id/window_name"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:gravity="center|left"
            android:text=""
            android:textColor="#515151"
            android:textSize="14sp"/>
    </LinearLayout>
    
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#f2f2f2" />
    <!--個人信息-->
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="個人信息："
            android:gravity="center"
            android:textColor="#515151"
            android:textSize="14sp"/>
        <TextView
            android:id="@+id/window_info"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center|left"
            android:layout_marginLeft="5dp"
            android:text=""
            android:textColor="#515151"
            android:textSize="14sp"/>
    </LinearLayout>
    
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#f2f2f2" />
    

</LinearLayout>

就這樣就完成了自定義網路圖片的marker和點擊標識彈出我們自定義的視窗，想要的效果就展示出來了