ANDROID 开发：谷歌地图开发入门（3）--- google map api v3 入门教程辅助

最新推荐文章于 2021-05-26 14:21:29 发布

springyama

最新推荐文章于 2021-05-26 14:21:29 发布

阅读量8.2k

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/springyama/article/details/8518459

版权

Android 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

google map api v3是不用密钥的，其是将网页加载到ANDROID的WEBVIEW控件中来实现。以下链接是官方开发指南，但是由于某些原因，照搬指南可能会不成功。

https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN

以下是我经过实践的步骤：

一、新建一个ANDROID 项目，目录应该如下（其中“images”文件夹为我后来添加的），

接着在assets文件夹下新建一个HTML文件“map_v3.html”，内容如下：

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>this is title.</title>

<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);
    
    var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map,  
      title:"Hello World,I am here!"
  });   
    // To add the marker to the map, call setMap();
   //marker.setMap(map);  

  }
  function centerAt(latitude, longitude){
    myLatlng = new google.maps.LatLng(latitude,longitude);
    map.panTo(myLatlng);
    
  }

</script>

</head>
<body style="margin:0px; padding:0px;" οnlοad="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

二、在“layout”文件夹下新建一个XML文件“map_v3.xml”，在其中放置一个WebView控件，具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <WebView
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/webview01"
  ></WebView>
</LinearLayout>

三、在"src"文件夹下新建一个“WebMapActivityJSInterface.java“文件，代码如下：

 

package test.com;

import android.app.Activity;
import android.content.Context;
import android.content.pm.ActivityInfo;
import android.location.Location;
import android.location.LocationListener;
import android.location.LocationManager;
import android.location.Criteria;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebMapActivityJSInterface 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 static final String MAP_URL = "file:///android_asset/map_v3.html";
  private WebView webView;
  private Location mostRecentLocation;

  @Override
  /** Called when the activity is first created. */
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.map_v3);
    getLocation();
    setupWebView();
    this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

  }
  /** Sets up the WebView object and loads the URL of the page **/
  private void setupWebView(){

    webView = (WebView) findViewById(R.id.webview01);
    webView.getSettings().setJavaScriptEnabled(true);
    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();
    }

  }


  /** The Location Manager manages location providers. This code searches
        for the best provider of data (GPS, WiFi/cell phone tower lookup,
        some other mechanism) and finds the last known location.
   **/
  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 location, request updates.        locationManager.requestLocationUpdates(provider, 1, 0, this);
    mostRecentLocation = locationManager.getLastKnownLocation(provider);
  }

  /** Sets the mostRecentLocation object to the current location of the device **/
  @Override
  public void onLocationChanged(Location location) {
    mostRecentLocation = location;
  }

  /** The following methods are only necessary because WebMapActivity implements LocationListener **/ 
  @Override
  public void onProviderDisabled(String provider) {
  }

  @Override
  public void onProviderEnabled(String provider) {
  }

  @Override
  public void onStatusChanged(String provider, int status, Bundle extras) {
  }

}

四、在"AndroidManifest.xml"文件中注册MapV3.java文件，  <activity
  android:name=".WebMapActivityJSInterface">
  </activity>

到此，恭喜你，大功告成！运行项目后，如果网络没有问题，可以看到一个地图，图标所示位置即为你手机当前的位置。

PS：

1、有时由于网络原因，可能会看不到地图，这时不妨换换网络，如从WIFI换成3G，等等；

2、建议把这个项目结合谷歌开发的官方指南来学习，官方指南中文网址为：https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN。

3、在HTML文件中，“<!DOCTYPE html>”这一行代码最好不要用--对于入门者来说。因为可能有些浏览器不支持HTML5。