【CSDN部落格遷移】Android高德地圖開發（2）——地圖顯示+自定義控制元件

在上篇文章中，我們已經申請了高德地圖開發KEY，並在android studio中部署了高德地圖開發環境，這篇文章介紹如何顯示地圖和自定義控制元件。

1.地圖顯示

1.1本篇文章主要用Fragment顯示地圖，定義佈局檔案fragment_map：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
 <!-地圖控制元件-->
  <FrameLayout
  android:id="@+id/gaodemap"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  </FrameLayout>
    <!--路況圖層控制按鈕-->
    <CheckBox
    android:id="@+id/louk_btn"
    android:layout_margin="20dp"
    android:layout_alignParentRight="true"
    android:layout_width="52dp"
    android:button="@color/transparent"
    android:background="@drawable/map_traffic"
    android:layout_height="52dp" />
</RelativeLayout>

1.2 繼承Fragment，建立MapFragment

1.2.1在OncreatView初始化高德地圖

  @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    mView = inflater.inflate(
            R.layout.fragment_map, container, false);
    init();
    initView();
    return mView;
}

    /*
 * 初始化控制元件
* */
    private void initView(){
    //路況圖層控制控制元件
    mCBLouk=(CheckBox)mView.findViewById(R.id.louk_btn);
    //自定義放大縮小控制元件
    mIBzoomIn=(ImageButton)mView.findViewById(R.id.map_zoomin);
    mIBzoomOut=(ImageButton)mView.findViewById(R.id.map_zoomout);
}

/**
 * 初始化高德地圖SupportMapFragment物件
 */
private void init() {
    //高德地圖條件
    AMapOptions aOptions = new AMapOptions();
    //aOptions.zoomGesturesEnabled(false);// 禁止通過手勢縮放地圖
    // aOptions.scrollGesturesEnabled(false);// 禁止通過手勢移動地圖
    aOptions.tiltGesturesEnabled(false);// 禁止通過手勢傾斜地圖
    point =new LatLng(31.2993790000,120.6195830000); //蘇州市中心點座標（注意是高德座標）
    CameraPosition LUJIAZUI = new CameraPosition.Builder()
            .target(point).zoom(17).build();
    aOptions.camera(LUJIAZUI);
    if (aMapFragment == null) {
        aMapFragment = SupportMapFragment.newInstance(aOptions);
        FragmentTransaction fragmentTransaction =getActivity(). getSupportFragmentManager()
                .beginTransaction();
        fragmentTransaction.add(R.id.gaodemap, aMapFragment,
                "gaodemap");
        fragmentTransaction.commit();
    }
}

1.2.2 在onResume()初始化高德地圖AMap物件

@Override
public void onResume() {
super.onResume();
initMap();
}

/**
 * 初始化高德地圖AMap物件
 */
private void initMap() {
if (aMap == null) {
    aMap = aMapFragment.getMap();// amap物件初始化成功
 //設定地圖引數
  setUpMap();
}
}

2.自定義放大縮小控制元件

由於高德地圖自帶的佈局按鈕太醜，我們隱藏預設放大縮小控制元件，自定義新的控制元件：

2.1在上面的fragment_map佈局檔案中加入放大縮小布局按鈕

<!-- 地圖放大縮小按鈕 -->
<LinearLayout
android:id="@+id/map_zoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:padding="8dp"
android:background="@drawable/bg_zoom"
android:orientation="vertical" >

<ImageButton
    android:id="@+id/map_zoomin"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@null"
    android:src="@drawable/ic_map_zoomin"
    android:background="@null" />
<View android:layout_width="match_parent"
    android:layout_height="0.5dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:background="@android:color/darker_gray"/>
<ImageButton
    android:id="@+id/map_zoomout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@null"
    android:src="@drawable/ic_map_zoomout"
    android:background="@null" />
</LinearLayout>

2.2 在initMap中自定義控制元件，如下：

    /**
     * 設定地圖引數
     * @author 
     */
    private void setUpMap() {
    //隱藏高德地圖預設的放大縮小控制元件
    aMap.getUiSettings().setZoomControlsEnabled(false);
    //開始定位
    //startPostion();//路況圖層觸發事件
    mCBLouk.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            //判斷路況圖層是否顯示
            if (mCBLouk.isChecked()){
                aMap.setTrafficEnabled(true);
                mCBLouk.setBackgroundColor(getResources().getColor(R.color.light_gery));
                mCBLouk.setButtonDrawable(getResources().getDrawable(R.drawable.map_traffic_hl));
            }else{
                aMap.setTrafficEnabled(false);
                mCBLouk.setBackgroundColor(getResources().getColor(R.color.light_gery));
                mCBLouk.setButtonDrawable(getResources().getDrawable(R.drawable.map_traffic));
            }

        }
    });
    //放大縮小事件觸發
    mIBzoomIn.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            aMap.animateCamera(CameraUpdateFactory.zoomIn());
        }
    });
    mIBzoomOut.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            aMap.animateCamera(CameraUpdateFactory.zoomOut());
        }
    });
}