在webView上加载谷歌地图

最新推荐文章于 2022-01-19 10:44:31 发布

wolf_jr

最新推荐文章于 2022-01-19 10:44:31 发布

阅读量1w

点赞数

分类专栏： android开发文章标签： android javascript google string 互联网 layout

android开发专栏收录该内容

21 篇文章 0 订阅

订阅专栏

在不支持maps api的android系统中要实现谷歌地图貌似只有这一条路可以走了。以下转载至Google Code，点击原地址查看详细：http://code.google.com/intl/zh-CN/apis/maps/articles/android_v3.html

-----------------------------===================转载分割线================---------------------------------

目标

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

您的布局。在此应用程序中，布局位于 res/layout/main.xml 文件中。
Android 清单文件，可帮助您管理在设备上使用互联网和位置服务的权限。
一个用于创建和管理 WebViewactivity. 的 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。

编写代码

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); 
  }

要将地图载入您的应用程序，请创建 WebView ，让它能够使用 JavaScript，然后将网址载入网页。如果要使用位置信息，可通过 JavaScript 接口进行公开。此示例代码使用WebMapActivity 类，该类可扩展 Activity。Activity 是基本接口，用于在 Android 应用程序中创建视觉互动。

要启用位置跟踪，您需要执行几个步骤。首先，必须从设备获取位置。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>

在手机上载入地图后，地图的外观将会如下所示：