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对象

@Overridepublic void onResume() {super.onResume();initMap();}/** * 初始化高德地图AMap对象 */private void initMap() {if (aMap == null) {    aMap = aMapFragment.getMap();// amap对象初始化成功 //设置地图参数  setUpMap();}}

2.自定义放大缩小控件

由于高德地图自带的布局按钮太丑，我们隐藏默认放大缩小控件，自定义新的控件：

2.1在上面的fragment_map布局文件中加入放大缩小布局按钮

<!-- 地图放大缩小按钮 --><LinearLayoutandroid: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());    }});

}

1.地图显示

2.自定义放大缩小控件

更多相关文章

随机推荐