在本机 Android 应用程序中载入 Google Maps API 网站

目标

本辅导手册适用于熟悉 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 中：

<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" 属性。这使应用程序能够通过 IDwebview 识别 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 接口。

<p class="para" in="" the="" following="" sample,="" application="" calls="" 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 电子市场。