ANDROID 开发：谷歌地图开发入门（3）--- google map api v3 入门教程辅助
2013-05-13 11:44
701 查看
原创:http://blog.csdn.net/springyama/article/details/8518459
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] view
plaincopy
<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;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
二、在“layout”文件夹下新建一个XML文件“map_v3.xml”，在其中放置一个WebView控件，具体代码如下：
[html] view
plaincopy
<?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“文件，代码如下：
[java] view
plaincopy
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。
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] view
plaincopy
<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;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
二、在“layout”文件夹下新建一个XML文件“map_v3.xml”，在其中放置一个WebView控件，具体代码如下：
[html] view
plaincopy
<?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“文件，代码如下：
[java] view
plaincopy
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。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ANDROID 开发：谷歌地图开发入门（3）--- google map api v3 入门教程辅助
- ANDROID 开发：谷歌地图开发入门（2）--- ZTE V899D ROOT 教程，获得ROOT权限。
- Android 百度地图开发教程（一） 地图使用入门及地图表面覆盖物使用
- ANDROID 开发：谷歌地图开发入门（1）--- google map api V1,V2,V3。
- Android开发入门教程--4.用户界面之Layout(一)
- [转]Android OpenGL ES 开发教程 从入门到精通
- （译）cocos2d-x跨android&ios平台开发入门教程
- 一看就懂的Android APP开发入门教程
- Android入门进阶教程(3)-linux 开发环境的搭建
- Android开发环境搭建,各版本系统下android环境搭建,android入门教程
- 微信开发实战入门视频教程(Android4.4.2）
- Android OpenGL ES 开发教程 从入门到精通
- Android开发入门教程--3.Activity入门指南
- Android开发入门教程--4.用户界面之Layout(一)
- Android开发入门教程--2.Android应用程序结构分析
- Android简明开发教程二十一：访问Internet 绘制在线地图
- 入门教程：Xamarin Android 开发 环境配置： SDK 在线更新镜像服务器资源 （一）
- Android Studio JNI开发入门教程
- Android OpenGL ES 开发教程 从入门到精通