在本機 Android 應用程序中載入 Google Maps API 網站

目錄

1. 目標
2. 為何將 V3 網頁載入本機應用程序？
3. 工作原理
4. 布局
5. 管理權限
6. 編寫代碼
7. 地圖
8. 後續步驟

目標

本輔導手冊適用於熟悉 Android 開發的 Java 開發人員。本輔導手冊中的代碼將使用 1.1 版 Android SDK 和 Google Maps API 第 3 版。

完成本輔導手冊的學習後，您將會獲得一個應用程序，該應用程序可以載入 Google Map，並將 Android 設備提供的位置設為地圖的中心。要查看本文的完整代碼，請參見 Google 代碼托管上的 gmaps-samples 項目。

本輔導手冊並沒有對 Android 開發作詳盡介紹。有關 Android 使用入門的詳細信息，請查看 Android 開發人員指南。

為何將 V3 網頁載入本機應用程序？

Android 開發環境為開發人員提供了許多優勢，其中包括：

• 對設備上本機服務（包括位置服務）的訪問權限
• 在 Android 電子市場中展示
• 使用 Android SDK 和 Eclipse 進行快速開發

請注意，存在一個本機 Android Google Maps API。一些開發人員當然希望僅在這樣的環境中進行開發。然而，對於開發服務器上承載而不是應用程序中承載的 Google Maps API 網頁，這些優勢非常明顯。

• 快速進行版本控制：如果將地圖應用程序放在服務器上，那麼，您就可以迅速地對其進行修改，而無需在 Android 電子市場中啟動更新。這意味著用戶無需下載和安裝更新即可獲得新版本的地圖。因此，不管在什麼時候，只要用戶打開您的應用程序，就可以獲得一個新地圖。
• 用戶可以更加頻繁地從 Google 獲得新增功能和錯誤修正：不必等待下一個 Android 更新，Google Maps API 就可以在服務器上進行更新，而無需使用您的應用程序在每台設備上進行更新。
• 跨平台兼容性：使用 Google Maps API，您可以創建一個可在多個平台上運行的地圖。

工作原理

使用 WebView 將網頁載入 Android 應用程序。實際上，WebView 會將一個浏覽器嵌入到您的應用程序中。該浏覽器將會顯示一些控件，以供您確定載入網頁的方式。通過這個嵌入的浏覽器，您還可以向 Java 橋接公開一個 JavaScript，有了該 JavaScript，您就可以從 JavaScript 網頁調用自己的本機 Android 應用程序中的 Java 方法了。通過此 WebView，您還可以直接從自己的 Java 應用程序中調用 JavaScript。

在創建一個新的 Android 空應用程序之後，您必須修改或創建四個基本組件才能構建自己的 WebView。

1. 您的布局。在此應用程序中，布局位於 res/layout/main.xml 文件中。
2. Android 清單文件，可幫助您管理在設備上使用互聯網和位置服務的權限。
3. 一個用於創建和管理 WebViewactivity. 的 Java 類。
4. 應用程序將載入的地圖。

我們將會在下面的幾個部分中介紹上述各個組件。

布局

布局文件可定義用戶界面的組件。您需要添加 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 對象，您可以通過查詢該對象來獲取設備已知的最後一個位置。這樣，您可以有兩種選擇。

• 讓應用程序直接調用網頁中的 JavaScript 函數，從而通過直接調用 JavaScript 將位置信息傳遞到 JavaScript。
• 您的應用程序可以向 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 電子市場。