本輔導手冊適用於熟悉 Android 開發的 Java 開發人員。本輔導手冊中的代碼將使用 1.1 版 Android SDK 和 Google Maps API 第 3 版。
完成本輔導手冊的學習後,您將會獲得一個應用程序,該應用程序可以載入 Google Map,並將 Android 設備提供的位置設為地圖的中心。要查看本文的完整代碼,請參見 Google 代碼托管上的 gmaps-samples 項目。
本輔導手冊並沒有對 Android 開發作詳盡介紹。有關 Android 使用入門的詳細信息,請查看 Android 開發人員指南。
Android 開發環境為開發人員提供了許多優勢,其中包括:
請注意,存在一個本機 Android Google Maps API。一些開發人員當然希望僅在這樣的環境中進行開發。然而,對於開發服務器上承載而不是應用程序中承載的 Google Maps API 網頁,這些優勢非常明顯。
使用 WebView
將網頁載入 Android 應用程序。實際上,WebView
會將一個浏覽器嵌入到您的應用程序中。該浏覽器將會顯示一些控件,以供您確定載入網頁的方式。通過這個嵌入的浏覽器,您還可以向 Java 橋接公開一個 JavaScript,有了該 JavaScript,您就可以從 JavaScript 網頁調用自己的本機 Android 應用程序中的 Java 方法了。通過此 WebView
,您還可以直接從自己的 Java 應用程序中調用 JavaScript。
在創建一個新的 Android 空應用程序之後,您必須修改或創建四個基本組件才能構建自己的 WebView
。
res/layout/main.xml
文件中。
WebView
activity.
的 Java 類。
我們將會在下面的幾個部分中介紹上述各個組件。
布局文件可定義用戶界面的組件。您需要添加 WebView
才能創建將載入網頁的元素。將此元素添加到您的 LinearLayout
中:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
添加將填充屏幕的 WebView 元素。請注意, WebView
元素具有 android:id="@+id/webview"
屬性。這使應用程序能夠通過 ID webview
識別 WebView
。
要訪問 Android 設備上的一些服務(如互聯網和位置信息),應用程序必須請求相應權限。通過每個應用程序都必須具有的 AndroidManifest.xml
文件實現此權限請求。用戶安裝該應用程序時,設備將要求用戶批准此請求。如果用戶不批准此請求,那麼,系統不會安裝該應用程序。如果用戶批准此請求,系統將會安裝該應用程序,並且該應用程序可以訪問所需的服務。
要授予該應用程序對互聯網和位置服務的訪問權限,請將以下三行添加到 AndroidManifest.xml
文件中:
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
第一行提供對互聯網的訪問權限,這樣,您的應用程序就可以使用互聯網資源了。第二行提供對設備大致位置的訪問權限。這來自不同的源(具體取決於您的設備),但通常來自使用 WiFi 或 CellId 查找功能獲得的大致位置。第三行提供對您的更准確位置的訪問權限,通常來自設備中的 GPS。
要將地圖載入您的應用程序,請創建 WebView
,讓它能夠使用 JavaScript,然後將網址載入網頁。如果要使用位置信息,可通過 JavaScript 接口進行公開。此示例代碼使用 WebMapActivity
類,該類可擴展 Activity
。Activity
是基本接口,用於在 Android 應用程序中創建視覺互動。
public class WebMapActivity extends Activity {
private static final String MAP_URL = "http://gmaps-samples.googlecode.com/svn/trunk/articles-android-webmap/simple-android-map.html";
private WebView webView;
@Override
/** Called when the activity is first created. */
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
getLocation();
setupWebView();
this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}
/** Sets up the WebView object and loads the URL of the page **/
private void setupWebView(){
final String centerURL = "javascript:centerAt(" +
mostRecentLocation.getLatitude() + "," +
mostRecentLocation.getLongitude()+ ")";
webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
//Wait for the page to load then send the location information
webView.setWebViewClient(new WebViewClient());
webView.loadUrl(MAP_URL);
}
要啟用位置跟蹤,您需要執行幾個步驟。首先,必須從設備獲取位置。WebMapActivity
使用 LocationManager
獲取位置。LocationManager
需要使用偵聽器。在此示例中,WebMapActivity
實現 LocationListener
,並充當 LocationManager
的偵聽器。
public class WebMapActivity extends Activity implements LocationListener {
private static final String MAP_URL = "http://gmaps-samples.googlecode.com/svn/trunk/articles-android-webmap/simple-android-map.html";
private void getLocation() {
LocationManager locationManager =
(LocationManager)getSystemService(Context.LOCATION_SERVICE);
Criteria criteria = new Criteria();
criteria.setAccuracy(Criteria.ACCURACY_FINE);
String provider = locationManager.getBestProvider(criteria,true);
//In order to make sure the device is getting the location, request updates.
locationManager.requestLocationUpdates(provider, 1, 0, this);
mostRecentLocation = locationManager.getLastKnownLocation(provider);
}
這將創建一個 Location
對象,您可以通過查詢該對象來獲取設備已知的最後一個位置。這樣,您可以有兩種選擇。
Location
對象公開 JavaScript 接口。 centerAt 會將設備提供的位置設為地圖的中心:
private void setupWebView(){
final String centerURL = "javascript:centerAt(" +
mostRecentLocation.getLatitude() + "," +
mostRecentLocation.getLongitude()+ ")";
webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
//Wait for the page to load then send the location information
webView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url){
webView.loadUrl(centerURL);
}
});
webView.loadUrl(MAP_URL);
}
以下示例公開了一個接口 window.android
,可以通過頁面中的 JavaScript 調用直接訪問該接口。通過此接口,您可以有效地向網頁公開內部的 Android 服務。但其缺點是通用性較差,僅當在 Android 設備上載入網頁時才可用。如果您要以這種方式進行開發,最佳做法是測試 window.android
,並在這些服務不可用時回退。
private void setupWebView(){
final String centerURL = "javascript:centerAt(" +
mostRecentLocation.getLatitude() + "," +
mostRecentLocation.getLongitude()+ ")";
webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
//Wait for the page to load then send the location information
webView.setWebViewClient(new WebViewClient());
webView.loadUrl(MAP_URL);
/** Allows JavaScript calls to access application resources **/
webView.addJavascriptInterface(new JavaScriptInterface(), "android");
}
/** Sets up the interface for getting access to Latitude and Longitude data from device
**/
private class JavaScriptInterface {
public double getLatitude(){
return mostRecentLocation.getLatitude();
}
public double getLongitude(){
return mostRecentLocation.getLongitude();
}
}
接下來,像往常一樣創建地圖。此示例代碼測試 window.android
(或您為 JavaScript 橋接指定的任何名稱)是否存在;如果不存在,則將中心設置為 0,0。此示例還公開了 centerAt
函數,該函數允許 Android 應用程序通過 JavaScript 來設置中心:
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var latitude = 0;
var longitude = 0;
if (window.android){
latitude = window.android.getLatitude();
longitude = window.android.getLongitude();
}
var myLatlng = new google.maps.LatLng(latitude,longitude);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
function centerAt(latitude, longitude){
myLatlng = new google.maps.LatLng(latitude,longitude);
map.panTo(myLatlng);
}
</script>
在手機上載入地圖後,地圖的外觀將會如下所示:
由於您已經創建了一個基本的應用程序,因此,您現在可以利用 Android 平台提供的其他服務。例如,您可以:
當然,在您開發 Android 應用程序後,可以將該程序發布到 Android 電子市場。