【原】Android高德地圖開發——地圖顯示+自定義控件

在上篇文章中，我們已經申請了高德地圖開發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());
        }
    });
}

轉載，請注明出處