在本机 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 应用程序中载入 Google Maps API 网站
 

后续步骤

由于您已经创建了一个基本的应用程序，因此，您现在可以利用 Android 平台提供的其他服务。例如，您可以：

  • 允许用户在其设备上存储位置或偏好设置。
  • 在地图上标出联系人所在的位置。
  • 允许用户使用加速计和罗盘移动地图。

当然，在您开发 Android 应用程序后，可以将该程序发布到 Android 电子市场。

相关内容