項目地址:https://github.com/teprinciple/AMapInfoWindowDemo
</br>
前言
現(xiàn)在的app很多都需要接入地圖篷帅,不同的app都會定義自己的marker以及InforWindow,本文以高德地圖為例,描述自己自定義InfoWindow之路。
先看看效果圖:
高德地圖的SDK以及接入流程,官方文檔已經(jīng)寫的很明白了: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;
}
}
}
第三步、調(diào)用
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();
//在執(zhí)行onCreateView時執(zhí)行mMapView.onCreate(savedInstanceState)闻牡,實現(xiàn)地圖生命周期管理
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”绳矩,除定義的操作之外罩润,默認操作也將會被執(zhí)行
}
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))
);
}
}
特別注意
顯示infowindow必須設置title或者sinnipet,同時設置aMap.setInfoWindowAdapter(this)
后記
項目地址:https://github.com/teprinciple/AMapInfoWindowDemo
項目中還包括以下功能(均已適配6.0):
1翼馆、跳轉(zhuǎn)到高德地圖進行導航功能
2割以、定位功能