百度地图的简单开发之引入基本地图以及修改地图样式（一）

 今天，想给大家带来一个基于百度地图官方开放的API开发的高仿百度地图的Demo(还称不上是一个APP)，基本实现了百度地图的几大核心功能，百度地图中的基本地图，百度地图的定位，百度地图的全景显示，百度地图的导航等功能。花了我大概10来天的样子吧，纯属个人瞎掰，一个写的，一天写一点所以上不了台面，但是感觉其中有些内容，以及开发的过程中可能遇到的各种坑，还是可以看一看滴，只要是我碰到的，我会乐意分享给大家，其实写这些也是为了使自己记忆更加深刻。其实准确的来说，这个demo能写成现在的样子，首先要感谢hyman大神，我是看了hyman大神的imooc上的视频，但是hyman只涉及到百度地图的基本地图和定位的功能，后面的两大功能是自己根据百度地图官方给出的API来写的。我想这个demo拆成五个部分来阐述：基本地图(包括界面和功能)，添加覆盖物，定位，全景，导航。今天就开始我们的第一讲。

   在开始之前，我给大家先来展示一下这个demo的部分截图，好对整体有个了解。

                

 

    

开始我们今天的第一讲：百度地图开发之基本地图

一、要想基于百度地图的API来开发，所以我们必须要有一个百度开发者账号，然后在官网中去申请一个APPKEY，然后通过我们的应用与APPKEY绑定即可。

     1.1、首先必须有一个第三方开发账号，并且注意填写安全码和APP包名
             安全码+APP包名---->才能允许申请，并且通过安全码和APP包名才能产生唯一的标识APPKEY
     1.2、安全码来自Eclipse中的SHA1 fingerprint(88:29:C9:AC:D8:5C:FC:DF:D3:D4:90:F4:98:FF:78:3A:7B:27:B7:3F)

     1.3、APP包名来自与AndroidMainfest.xml中的   package="com.zhongqihong.mymap"
     1.4、最后将会产生一个APPKEY:-(dAvLKg3Khr02YXYT5Ns63ut4)

 

 

二、通过第一步我们得到一个很重要的APPKEY，接着在创建Android工程的时候，需要把我们申请得到的APPKEY，在我们android项目中的配置文件中配置好。

并且我们还得注册一些必要的权限，以及导入一些百度地图官方的jar包。另一方面，大家都知道加载地图过程是一个非常耗电的过程，所以如果当我们退出当前的Activity的时候，实际上地图的后台service一直是开着的，所以我们有必要去控制该地图的生命周期，最好管理的方法，就是将地图的生命周期和我们当前加载地图View的Activity的生命周期绑定在一起即可。所以就有必要去重写activity中的管理生命周期的几个方法。这样一来，当我们退出当前的Activity的时候，地图的生命也会被Destory.

         第一步：创建并配置工程；
         第二步：在AndroidManifest中添加开发密钥、所需权限等信息；
                      （1）在application中添加开发密钥
                          <application>  
                                 <meta-data  
                                  android:name="com.baidu.lbsapi.API_KEY"  
                                  android:value="开发者 key" />  
                         </application>
                       2）添加所需权限
                          <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
                          <uses-permission android:name="android.permission.INTERNET"/>
                          <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
                          <uses-permission android:name="android.permission.WAKE_LOCK"/>
                          <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
                          <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
                          <uses-permission android:name="android.permission.GET_TASKS" />
                          <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
                          <uses-permission android:name="android.permission.WRITE_SETTINGS" />
        第三步，在布局xml文件中添加地图控件；

                  <com.baidu.mapapi.map.MapView
        android:id="@+id/mymap_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true" />
第四步，在应用程序创建时初始化 SDK引用的Context 全局变量：
public class MainActivity extends Activity {  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);   
        //在使用SDK各组件之前初始化context信息，传入ApplicationContext  
        //注意该方法要再setContentView方法之前实现  
        SDKInitializer.initialize(getApplicationContext());  
        setContentView(R.layout.activity_main);  
    }  
}
注意：在SDK各功能组件使用之前都需要调用
SDKInitializer.initialize(getApplicationContext());，因此我们建议该方法放在Application的初始化方法中
第五步，创建地图Activity，管理地图生命周期；
public class MainActivity extends Activity {  
    MapView mMapView = null;  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);   
        //在使用SDK各组件之前初始化context信息，传入ApplicationContext  
        //注意该方法要再setContentView方法之前实现  
        SDKInitializer.initialize(getApplicationContext());  
        setContentView(R.layout.activity_main);  
        //获取地图控件引用  
        mMapView = (MapView) findViewById(R.id.bmapView);  
    }  
    @Override  
    protected void onDestroy() {  
        super.onDestroy();  
        //在activity执行onDestroy时执行mMapView.onDestroy()，实现地图生命周期管理  
        mMapView.onDestroy();  
    }  
    @Override  
    protected void onResume() {  
        super.onResume();  
        //在activity执行onResume时执行mMapView. onResume ()，实现地图生命周期管理  
        mMapView.onResume();  
        }  
    @Override  
    protected void onPause() {  
        super.onPause();  
        //在activity执行onPause时执行mMapView. onPause ()，实现地图生命周期管理  
        mMapView.onPause();  
        }  
    }

代码：

MainActivity.Java:

[java] view plain copy

 print?

1. package com.mikyou.maptest;  
2.   
3. import com.baidu.mapapi.SDKInitializer;  
4. import com.baidu.mapapi.map.MapView;  
5.   
6. import android.os.Bundle;  
7. import android.app.Activity;  
8.   
9.   
10. public class MainActivity extends Activity {  
11.     private MapView mapView=null;  
12.     @Override  
13.     protected void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         SDKInitializer.initialize(getApplicationContext());  
16.         setContentView(R.layout.activity_main);  
17.         mapView=(MapView) findViewById(R.id.map_view_test);  
18.     }  
19.     @Override  
20.     protected void onPause() {  
21.         mapView.onPause();  
22.         super.onPause();  
23.     }  
24.     @Override  
25.     protected void onResume() {  
26.         mapView.onResume();  
27.         super.onResume();  
28.     }  
29.     @Override  
30.     protected void onDestroy() {  
31.         mapView.onDestroy();  
32.         super.onDestroy();  
33.     }  
34. }  

activity_main.xml:

[html] view plain copy

 print?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <com.baidu.mapapi.map.MapView  
7.         android:id="@+id/map_view_test"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="match_parent"  
10.         android:clickable="true" />  
11.   
12. </RelativeLayout>  

 

到这里一个基本的地图就可以加载出来了。来看下效果：

、

这就是百度官方最开始的地图，这个和我的demo中地图界面样式还是有很大的区别的。

三、由以上两步相信你也得到了那个默认的地图，接着我们就要把默认的地图中的有些默认控件给隐藏掉，给我们一张“洁净”的地图，那样你就可以尽情发挥你的创意

在这张纯净地图上设计出你想要的UI。

[java] view plain copy

 print?

1. /** 
2.      * @author zhongqihong 
3.      * 修改默认百度地图的View 
4.      *  
5.      * */  
6.     private void changeDefaultBaiduMapView() {  
7.         changeInitialzeScaleView();//改变默认百度地图初始加载的地图比例  
8.         //设置隐藏缩放和扩大的百度地图的默认的比例按钮  
9.         for (int i = 0; i < myMapView.getChildCount(); i++) {//遍历百度地图中的所有子View,找到这个扩大和缩放的按钮控件View，然后设置隐藏View即可  
10.             View child=myMapView.getChildAt(i);  
11.             if (child instanceof ZoomControls) {  
12.                 defaultBaiduMapScaleButton=child;//该defaultBaiduMapScaleButton子View是指百度地图默认产生的放大和缩小的按钮，得到这个View  
13.                 break;  
14.             }  
15.         }  
16.         defaultBaiduMapScaleButton.setVisibility(View.GONE);//然后将该View的Visiblity设为不存在和不可见，即隐藏  
17.         defaultBaiduMapLogo =myMapView.getChildAt(1);//该View是指百度地图中默认的百度地图的Logo,得到这个View  
18.         defaultBaiduMapLogo.setPadding(300, -10, 100, 100);//设置该默认Logo View的位置，因为这个该View的位置会影响下面的刻度尺单位View显示的位置  
19.         myMapView.removeViewAt(1);//最后移除默认百度地图的logo View  
20.         defaultBaiduMapScaleUnit=myMapView.getChildAt(2);//得到百度地图的默认单位刻度的View  
21.         defaultBaiduMapScaleUnit.setPadding(100, 0, 115,200);//最后设置调整百度地图的默认单位刻度View的位置  
22.     }  

[java] view plain copy

 print?

1. /** 
2.  * @author zhongqihong 
3.  * 修改百度地图默认开始初始化加载地图比例大小 
4.  * */  
5. private void changeInitialzeScaleView() {  
6.     myBaiduMap=myMapView.getMap();//改变百度地图的放大比例,让首次加载地图就开始扩大到500米的距离  
7.     MapStatusUpdate factory=MapStatusUpdateFactory.zoomTo(15.0f);  
8.     myBaiduMap.animateMapStatus(factory);         
9. }  

 修改后一张纯净的地图的效果:

最后，接着开始自己布局，这个比较简单，就不详细说了，和在一般的空白页面布局是一样的，没什么特别的。

直接把布局文件贴下:

[html] view plain copy

 print?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <com.baidu.mapapi.map.MapView  
7.         android:id="@+id/map_view_test"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="match_parent"  
10.         android:clickable="true" />  
11.   
12.     <LinearLayout  
13.         android:layout_width="40dp"  
14.         android:layout_height="wrap_content"  
15.         android:layout_alignParentBottom="true"  
16.         android:layout_alignParentLeft="true"  
17.         android:layout_marginBottom="120dp"  
18.         android:layout_marginLeft="10dp"  
19.         android:background="#FFF"  
20.         android:orientation="vertical"  
21.         android:paddingLeft="5dp"  
22.         android:paddingRight="5dp" >  
23.   
24.         <ImageView  
25.             android:id="@+id/add_scale"  
26.             android:layout_width="wrap_content"  
27.             android:layout_height="wrap_content"  
28.             android:layout_gravity="center_horizontal"  
29.             android:paddingBottom="12dp"  
30.             android:paddingLeft="8dp"  
31.             android:paddingRight="8dp"  
32.             android:paddingTop="12dp"  
33.             android:src="@drawable/ic_track_explore_zoomin_focus" />  
34.   
35.         <View  
36.             android:layout_width="match_parent"  
37.             android:layout_height="0.1dp"  
38.             android:background="#22000000" />  
39.   
40.         <ImageView  
41.             android:id="@+id/low_scale"  
42.             android:layout_width="wrap_content"  
43.             android:layout_height="wrap_content"  
44.             android:layout_gravity="center_horizontal"  
45.             android:paddingBottom="12dp"  
46.             android:paddingLeft="8dp"  
47.             android:paddingRight="8dp"  
48.             android:paddingTop="12dp"  
49.             android:src="@drawable/ic_track_explore_zoomout_dis" />  
50.     </LinearLayout>  
51.   
52.     <ImageView  
53.         android:id="@+id/my_location"  
54.         android:layout_width="wrap_content"  
55.         android:layout_height="wrap_content"  
56.         android:layout_alignParentBottom="true"  
57.         android:layout_alignParentLeft="true"  
58.         android:layout_marginBottom="60dp"  
59.         android:layout_marginLeft="10dp"  
60.         android:background="#FFF"  
61.         android:padding="10dp"  
62.         android:src="@drawable/main_icon_location" />  
63.   
64.     <LinearLayout  
65.         android:layout_width="wrap_content"  
66.         android:layout_height="wrap_content"  
67.         android:layout_alignParentRight="true"  
68.         android:layout_marginRight="10dp"  
69.         android:layout_marginTop="100dp"  
70.         android:orientation="vertical" >  
71.   
72.         <ImageView  
73.             android:id="@+id/road_condition"  
74.             android:layout_width="40dp"  
75.             android:layout_height="40dp"  
76.             android:background="@drawable/add_poi_map_selection_btn_pressed"  
77.             android:scaleType="centerInside"  
78.             android:src="@drawable/main_icon_roadcondition_off" />  
79.   
80.         <ImageView  
81.             android:id="@+id/map_type"  
82.             android:layout_width="40dp"  
83.             android:layout_height="40dp"  
84.             android:layout_marginTop="10dp"  
85.             android:background="@drawable/add_poi_map_selection_btn_pressed"  
86.             android:scaleType="centerInside"  
87.             android:src="@drawable/main_icon_maplayers" />  
88.   
89.         <ImageView  
90.             android:id="@+id/map_panorama"  
91.             android:layout_width="40dp"  
92.             android:layout_height="40dp"  
93.             android:layout_marginTop="10dp"  
94.             android:background="@drawable/add_poi_map_selection_btn_pressed"  
95.             android:scaleType="centerInside"  
96.             android:src="@drawable/main_map_icon_streetscape_selected" />  
97.   
98.         <ImageView  
99.             android:id="@+id/map_gotogether"  
100.             android:layout_width="40dp"  
101.             android:layout_height="40dp"  
102.             android:layout_marginTop="10dp"  
103.             android:background="@drawable/add_poi_map_selection_btn_pressed"  
104.             android:scaleType="centerInside"  
105.             android:src="@drawable/map_main_icon_location_share" />  
106.   
107.         <ImageView  
108.             android:id="@+id/map_location"  
109.             android:layout_width="40dp"  
110.             android:layout_height="40dp"  
111.             android:layout_marginTop="10dp"  
112.             android:background="@drawable/add_poi_map_selection_btn_pressed"  
113.             android:scaleType="centerInside"  
114.             android:src="@drawable/track_collect_running" />  
115.   
116.         <ImageView  
117.             android:id="@+id/map_marker"  
118.             android:layout_width="40dp"  
119.             android:layout_height="40dp"  
120.             android:layout_marginTop="10dp"  
121.             android:background="@drawable/add_poi_map_selection_btn_pressed"  
122.             android:scaleType="centerInside"  
123.             android:src="@drawable/icon_select_point" />  
124.     </LinearLayout>  
125.   
126.     <TextView  
127.         android:id="@+id/mylocation_text"  
128.         android:layout_width="match_parent"  
129.         android:layout_height="45dp"  
130.         android:layout_alignParentBottom="true"  
131.         android:background="#FFF"  
132.         android:drawableLeft="@drawable/mylocation"  
133.         android:drawablePadding="10dp"  
134.         android:gravity="center_vertical"  
135.         android:text="我的位置:北京中关村208号" />  
136.   
137.     <RelativeLayout  
138.         android:layout_width="match_parent"  
139.         android:layout_height="wrap_content"  
140.         android:padding="5dp" >  
141.   
142.         <EditText  
143.             android:id="@+id/search_panorama"  
144.             android:layout_width="match_parent"  
145.             android:layout_height="50dp"  
146.             android:layout_marginTop="10dp"  
147.             android:background="@drawable/edit_bg"  
148.             android:drawableLeft="@drawable/icon_home_user_no_login"  
149.             android:drawablePadding="10dp"  
150.             android:hint="搜地点、查公交、找路线"  
151.             android:textSize="16sp"  
152.             android:textColor="#bbcccccc"  
153.             android:textColorHint="#aacccccc"  
154.             android:padding="10dp" />  
155.         
156.         <ImageView   
157.             android:id="@+id/ok_to_search"  
158.             android:layout_width="wrap_content"  
159.             android:layout_height="wrap_content"  
160.              android:layout_marginTop="25dp"  
161.              android:clickable="true"  
162.              android:layout_marginRight="10dp"  
163.             android:src="@drawable/icon_line_to_blue"  
164.             android:layout_alignParentRight="true"  
165.             />  
166.           <View   
167.               android:padding="5dp"  
168.             android:layout_toLeftOf="@+id/ok_to_search"  
169.             android:layout_width="0.1dp"  
170.             android:layout_height="40dp"  
171.             android:layout_marginRight="10dp"  
172.             android:layout_centerVertical="true"  
173.             android:background="#22000000"  
174.             />  
175.     </RelativeLayout>  
176.   
177.     <ImageButton  
178.         android:id="@+id/start_go"  
179.         android:layout_width="wrap_content"  
180.         android:layout_height="wrap_content"  
181.         android:layout_above="@id/mylocation_text"  
182.         android:layout_alignParentRight="true"  
183.         android:layout_marginBottom="10dp"  
184.         android:layout_marginRight="10dp"  
185.         android:background="#00123456"  
186.         android:src="@drawable/start_go_bg" />  
187.   
188.     <LinearLayout  
189.         android:id="@+id/mark_layout"  
190.         android:layout_width="match_parent"  
191.         android:layout_height="wrap_content"  
192.         android:layout_alignParentBottom="true"  
193.         android:background="#cc4e5a6b"  
194.         android:clickable="true"  
195.         android:orientation="vertical"  
196.         android:visibility="gone" >  
197.   
198.         <ImageView  
199.             android:id="@+id/mark_image"  
200.             android:layout_width="match_parent"  
201.             android:layout_height="150dp"  
202.             android:layout_marginBottom="10dp"  
203.             android:layout_marginLeft="12dp"  
204.             android:layout_marginRight="12dp"  
205.             android:layout_marginTop="10dp"  
206.             android:background="@drawable/img_border"  
207.             android:scaleType="fitXY"  
208.             android:src="@drawable/pic1" />  
209.   
210.         <RelativeLayout  
211.             android:layout_width="match_parent"  
212.             android:layout_height="50dp"  
213.             android:background="@drawable/bg_map_bottom" >  
214.   
215.             <LinearLayout  
216.                 android:layout_width="wrap_content"  
217.                 android:layout_height="wrap_content"  
218.                 android:layout_centerVertical="true"  
219.                 android:layout_marginLeft="15dp"  
220.                 android:orientation="vertical" >  
221.   
222.                 <TextView  
223.                     android:id="@+id/name"  
224.                     android:layout_width="wrap_content"  
225.                     android:layout_height="wrap_content"  
226.                     android:text="英伦贵族小旅馆"  
227.                     android:textColor="#FFF"  
228.                     android:textSize="16sp" />  
229.   
230.                 <TextView  
231.                     android:id="@+id/distance"  
232.                     android:layout_width="wrap_content"  
233.                     android:layout_height="wrap_content"  
234.                     android:layout_marginTop="5dp"  
235.                     android:text="距离209米"  
236.                     android:textColor="#FFF" />  
237.             </LinearLayout>  
238.   
239.             <TextView  
240.                 android:id="@+id/zan_nums"  
241.                 android:layout_width="wrap_content"  
242.                 android:layout_height="wrap_content"  
243.                 android:layout_alignParentRight="true"  
244.                 android:layout_centerVertical="true"  
245.                 android:layout_marginRight="10dp"  
246.                 android:drawableLeft="@drawable/map_zan"  
247.                 android:text="1289"  
248.                 android:textColor="#FFF"  
249.                 android:textSize="16sp" />  
250.         </RelativeLayout>  
251.     </LinearLayout>  
252. </RelativeLayout>  

最后界面的效果:

那么今天就到这了，最后附上本次demo链接，若要测试本demo一定要修改把APPKEY修改你自己的即可。

Demo下载链接