三步實現地圖自定義InfoWindow

rtoe5728 7年前發布 | 11K 次閱讀安卓開發 Android開發移動開發

前言

現在的app很多都需要接入地圖，不同的app都會定義自己的marker以及InforWindow，本文以高德地圖為例，描述自己自定義InfoWindow之路。

先看看效果圖：

高德地圖的SDK以及接入流程，官方文檔已經寫的很明白了： http://lbs.amap.com/

第一步：自定義InforWindow的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="127dp"
    android:background="#0000"  
    >
    <LinearLayout
        android:layout_width="209dp"
        android:layout_height="127dp"
        android:orientation="vertical"
        android:background="@drawable/inforwindow_bg">
        <TextView
            android:id="@+id/agent_name"
            android:layout_marginLeft="14dp"
            android:layout_marginRight="14dp"
            android:layout_marginTop="11dp"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:textSize="14sp"
            android:textColor="@color/black_text"/>
        <TextView
            android:id="@+id/agent_addr"
            android:layout_marginLeft="14dp"
            android:layout_marginRight="14dp"
            android:layout_marginTop="2dp"
            android:layout_width="match_parent"
            android:layout_height="17dp"
            android:singleLine="true"
            android:textSize="12sp"
            android:textColor="@color/black_text2"/>
        <TextView
            android:id="@+id/waitNum"
            android:layout_marginLeft="14dp"
            android:layout_marginTop="2dp"
            android:layout_width="wrap_content"
            android:layout_height="17dp"
            android:textSize="12sp"
            android:textColor="#1DA1F2"/>
        <View
            android:layout_marginLeft="6dp"
            android:layout_marginRight="6dp"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginTop="9dp"
            android:background="#DFDFDF"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <LinearLayout
                android:layout_marginTop="9dp"
                android:id="@+id/navigation_LL"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                >
                <ImageView
                    android:layout_marginLeft="27dp"
                    android:layout_width="17dp"
                    android:layout_height="18dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/inforwindow_navigation"/>
                <TextView
                    android:layout_marginLeft="10dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/infowindow_navigation"
                    android:textSize="14sp"
                    android:textColor="@color/black_text"/>
            </LinearLayout>
            <View
                android:layout_width="1dp"
                android:layout_height="30dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="13dp"
                android:background="#DFDFDF"/>
            <LinearLayout
                android:layout_marginTop="9dp"
                android:id="@+id/call_LL"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                >
                <ImageView
                    android:layout_marginLeft="23dp"
                    android:layout_width="19dp"
                    android:layout_height="18dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/inforwindow_call"/>
                <TextView
                    android:layout_marginLeft="10dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/infowindow_call"
                    android:textSize="14sp"
                    android:textColor="@color/black_text"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
    <!-- 用來偏移inforwindow的位置-->
    <TextView
        android:layout_width="38dp"
        android:layout_height="match_parent" />
</LinearLayout>

第二步、自定義適配器

需要繼承高德地圖的AMap.InfoWindowAdapter

package teprinciple.yang.amapinforwindowdemo.adapter;
import android.content.Context;
import android.support.annotation.NonNull;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.amap.api.maps2d.AMap;
import com.amap.api.maps2d.model.LatLng;
import com.amap.api.maps2d.model.Marker;
import teprinciple.yang.amapinforwindowdemo.base.BaseApplication;
import teprinciple.yang.amapinforwindowdemo.R;
import teprinciple.yang.amapinforwindowdemo.utils.NavigationUtils;
import teprinciple.yang.amapinforwindowdemo.utils.PhoneCallUtils;
/**

Created by Teprinciple on 2016/8/23.
地圖上自定義的infowindow的適配器
*/
public class InfoWinAdapter implements AMap.InfoWindowAdapter, View.OnClickListener {
 private Context mContext = BaseApplication.getIntance().getBaseContext();;
 private LatLng latLng;
 private LinearLayout call;
 private LinearLayout navigation;
 private TextView nameTV;
 private String agentName;
 private TextView addrTV;
 private String snippet;
@Override
 public View getInfoWindow(Marker marker) {

 initData(marker);
 View view = initView();
 return view;

}
 @Override
 public View getInfoContents(Marker marker) {

 return null;

}
private void initData(Marker marker) {

 latLng = marker.getPosition();
 snippet = marker.getSnippet();
 agentName = marker.getTitle();

}
@NonNull
 private View initView() {

 View view = LayoutInflater.from(mContext).inflate(R.layout.view_infowindow, null);
 navigation = (LinearLayout) view.findViewById(R.id.navigation_LL);
 call = (LinearLayout) view.findViewById(R.id.call_LL);
 nameTV = (TextView) view.findViewById(R.id.name);
 addrTV = (TextView) view.findViewById(R.id.addr);

 nameTV.setText(agentName);
 addrTV.setText(String.format(mContext.getString(R.string.agent_addr),snippet));

 navigation.setOnClickListener(this);
 call.setOnClickListener(this);
 return view;

}



@Override
public void onClick(View v) {
    int id = v.getId();
    switch (id){
        case R.id.navigation_LL:  //點擊導航
            NavigationUtils.Navigation(latLng);
            break;

        case R.id.call_LL:  //點擊打電話
            PhoneCallUtils.call("028-"); //TODO 處理電話號碼
            break;
    }
}

}</code></pre> 
  
第三步、調用 
  package teprinciple.yang.amapinforwindowdemo;
import android.os.Bundle;
import android.util.Log;
import com.amap.api.location.AMapLocation;
import com.amap.api.location.AMapLocationClient;
import com.amap.api.location.AMapLocationClientOption;
import com.amap.api.location.AMapLocationListener;
import com.amap.api.maps2d.AMap;
import com.amap.api.maps2d.CameraUpdateFactory;
import com.amap.api.maps2d.MapView;
import com.amap.api.maps2d.UiSettings;
import com.amap.api.maps2d.model.BitmapDescriptorFactory;
import com.amap.api.maps2d.model.LatLng;
import com.amap.api.maps2d.model.Marker;
import com.amap.api.maps2d.model.MarkerOptions;
import teprinciple.yang.amapinforwindowdemo.adapter.InfoWinAdapter;
import teprinciple.yang.amapinforwindowdemo.base.BaseActivity;
import teprinciple.yang.amapinforwindowdemo.entity.Constant;
import teprinciple.yang.amapinforwindowdemo.utils.CheckPermissionsActivity;
public class MainActivity extends CheckPermissionsActivity implements AMap.OnMapClickListener, AMap.OnMarkerClickListener {

private MapView mapView;
private AMap aMap;
private UiSettings uiSettings;
private InfoWinAdapter adapter;
private Marker oldMarker;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initView();
    //在執行onCreateView時執行mMapView.onCreate(savedInstanceState)，實現地圖生命周期管理
    mapView.onCreate(savedInstanceState);
    initOperation();
}

private void initView() {
    mapView = (MapView) initV(R.id.mapView);
}

private void initOperation() {
    initMap();
}

/**
 * 初始化地圖
 */
private void initMap() {
    if (aMap == null) {
        aMap = mapView.getMap();
        uiSettings = aMap.getUiSettings();
        aMap.setOnMapClickListener(this);
    }
    uiSettings.setZoomControlsEnabled(false); //隱藏縮放控件
    //自定義InfoWindow
    aMap.setOnMarkerClickListener(this);
    adapter = new InfoWinAdapter();
    aMap.setInfoWindowAdapter(adapter);

    addMarkerToMap(Constant.CHENGDU,"成都","中國四川省成都市");
}

@Override
public void onResume() {
    super.onResume();
    mapView.onResume(); //管理地圖的生命周期
}

@Override
public void onPause() {
    super.onPause();
    mapView.onPause(); //管理地圖的生命周期
}

@Override
public void onDestroy() {
    super.onDestroy();
    mapView.onDestroy(); //管理地圖的生命周期
}

//地圖的點擊事件
@Override
public void onMapClick(LatLng latLng) {
    //點擊地圖上沒marker 的地方，隱藏inforwindow
    if (oldMarker != null) {
        oldMarker.hideInfoWindow();
        oldMarker.setIcon(BitmapDescriptorFactory.fromResource(R.drawable.marker_normal));
    }
}

//maker的點擊事件
@Override
public boolean onMarkerClick(Marker marker) {
    if (oldMarker != null) {
        oldMarker.setIcon(BitmapDescriptorFactory.fromResource(R.drawable.marker_normal));
    }
    oldMarker = marker;
    marker.setIcon(BitmapDescriptorFactory.fromResource(R.drawable.marker_selected));
    return false; //返回 “false”，除定義的操作之外，默認操作也將會被執行
}

private void addMarkerToMap(LatLng latLng, String title, String snippet) {
    aMap.addMarker(new MarkerOptions().anchor(0.5f, 0.5f)
            .position(latLng)
            .title(title)
            .snippet(snippet)
            .icon(BitmapDescriptorFactory.fromResource(R.drawable.marker_normal))
    );
}

}</code></pre> 
  
后記 
  項目中還包括以下功能（均已適配6.0）： 
  1、跳轉到高德地圖進行導航功能 
  2、定位功能 
    
  來自：http://www.jianshu.com/p/8365b40d3829


                    
                         本文由用戶 rtoe5728 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1482979514579.html
                         安卓開發 Android開發 移動開發

三步實現地圖自定義InfoWindow

前言

后記

相關經驗

相關資訊

相關文檔

目錄