1 在 Tizen web 应用程序中使用谷歌地图

谷歌地图服务是一项众所周知的地图服务。 它允许您从您的应用程序访问 Google 基于位置的服务。 它提供了直观的用户界面，良好的用户体验，以及丰富的服务，如寻找合适的地点，计算方向，描绘交通条件和查看谷歌街景图像。 借助最近推出的谷歌街景服务，​​你甚至可以在您的 Web 应用程序中嵌入街景全景图像。 谷歌为您提供了非常灵活的 JavaScript Api 和 HTTP 的一套基于 web 的服务以使用这些功能。 同时，您可以使用 HTML5 W3C 地理定位 API 从设备获得位置数据，我们将在本文中向您展示如何利用谷歌地图做到这一点。 在您的 web 应用程序中使用谷歌地图有两种方式：

• 使用现有的谷歌地图的 web 服务（HTTP API 调用）：这一方法要求您从 Google 服务器接收数据时执行对 AJAX 调用的回调。 使用 AJAX 调用从远程服务器获取数据可能会由于同源策略而比较困难。 幸运的是 web 浏览器不论安全限制而允许您发送 AJAX 调用。
• 使用谷歌地图API V3：它提供了你为开发全功能的基于位置的应用程序所需要的所有 JavaScript API。

在这篇文章中，我们将介绍上述两种情况。

2 先决条件

所附的示例应用程序使用谷歌地图 Web 服务，谷歌地图 API 和 W3C 地理定位 API。 用户界面基于 jQuery Mobile 1.2.0 框架。 jQuery Mobile 框架使您能够创建具有直观且一致的用户界面、高度可扩展的 web 应用程序。 若要能够使用 jQuery Mobile，您的应用程序必须包含 jQuery 1.8.0 库。 示例应用程序已在 Tizen SDK 2.0.0a2 通过测试。 关于如何使用 jQuery Moible 框架的信息可以在此处找到：http://jquerymobile.com/

示例应用程序的屏幕快照

3 基本的谷歌地图和地理定位功能

这篇文章将向您显示如何在 Tizen web 应用程序中使用谷歌地图 API 和谷歌地图的 web 服务的功能。 使用基于位置的应用程序时，您可能想要获取设备的当前位置。 你可以使用 W3C 的地理定位 AP 获得当前的位置，而且它受 Tizen 支持。 一旦你获得您当前的位置，您可以将其设置为地图的中心。 所附的示例应用程序将显示您如何做到这一点。 当我们谈论"搜索位置"时，我们实际上是在将人类可读的地址翻译到地理坐标。 这个过程被称为地理编码。 谷歌地图还提供了称为谷歌距离矩阵的服务。 它允许您以计算两个给定的位置之间的距离，以及使用如汽车或步行等交通方式需要多长时间才能到达目的地。 此外，谷歌还提供了谷歌街景服务，而且它变越来越受欢迎。 我们可以在您的 Tizen Web 应用程序中使用这样一些功能。 警告：在写作本文的时候，并不是所有的街景功能都支持 Tizen，如刷新全景等。我们建议您使用提供被动视图的谷歌街景图像 API。 我们在本文后面的部分会告诉你如何使用它。  

a) 获取你的位置

W3C 地理定位 API 允许您基于 GPS 数据获取用户的位置。 您可以使用此 API 来一次请求一个位置或跟踪用户的实时位置。 下面是请求一个 GPS 位置的被动方式的示例代码。 但是我们不建议以这种方式获得实时位置更新（如跟踪用户的位置）。 另有一个来自 navigator.geolocation 对象的 API，可用于此目的 (navigator.geolocation.watchPosition)。

navigator.geolocation.getCurrentPosition(function(position) {
    console.log('Latitude: ' + position.coords.latitude  + 'Longitude: ' + position.coords.longitude);
}, function(error) {
    console.error('GPS error occurred');
});

b）基本谷歌地图视图

一旦你有了用户的当前位置，便可以显示地图。 我们在此示例中使用基本谷歌地图视图。 您可以在 Tizen 中以与 Web 网站上完全相同的方式使用地图视图。 首先，创建地图的容器。

然后，创建此容器的 CSS 样式表。 通常情况下，你给地图容器以百分比值。 它可以是整个屏幕的宽度和高度的100％。 之后，您使用地图选项对象初始化地图。 请记住关闭谷歌街景功能的窍门（您可以在这篇文章的末尾找到它）。

var mapOptions = {
    center : new google.maps.LatLng(52.33, 54.12),
    zoom : 6, // zoom value from 0 up to 18
    mapTypeId : google.maps.MapTypeId.HYBRID,
    streetViewControl : false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

c） 获取路线

您可以看到显示的地图。 现在，我们显示如何获取两地之间的方向。 获得路线有两种方式。

• 使用谷歌路线服务：这是比较容易的方法，因为你不需要自己发送所有的 AJAX 请求。
• 使用谷歌路线 API： 这是通过 RESTful API 访问的常规 web 服务。 这种方法稍微复杂一点，因为你必须自己实现 AJAX 调用。

在此示例中，我们将使用第一种方法。  要发送路线要求，你只需要提供出发地和目的地以及出行方式的偏好，如开车或步行。 示例代码如下所示。

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
// we assume that the map is already defined and displayed
directionsDisplay.setMap(map);
var request = {
    origin : 'Warsaw',
    destination : 'Paris',
    travelMode : google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
    if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    } else {
        console.error('Unable to get directions');
    }
});

d）地理编码

地理编码服务提供人类可读地址到地理坐标之间的转换。 它是由谷歌地图 API 和谷歌地图的 Web 服务提供的核心服务之一。 此 API 让您访问谷歌的数据库。 你传递给地理编码 API 的位置可以是街道的名称、城市名称或区域名称。 而地理编码 API 则从服务器返回地理坐标。 可以使用两种方法获得地理编码的数据：

• 使用谷歌的地理编码服务：这是一个比较简单的方法，因为你不需要自己执行所有服务器的 AJAX 请求。
• 使用谷歌的地理编码API：它是一个Web 服务，通​​过发送简单的 HTTP GET请求访问。 这种方法稍微复杂一点，因为你必须自己执行 AJAX 调用。

在此示例中，我们将使用较为复杂的方法。 首先，您使用此示例 URL：http://maps.googleapis.com/maps/api/geocode/json?address=[location_strin...（此处的 location_string 是您要其地理编码的位置的编码的 URL 名称）向 Google 地理编码 API 发送 AJAX 调用。 请记住，Tizen web 浏览器允许跨域请求，如果您在普通的 PC 浏览器中运行下列脚本，它将失败；其起因就是我们前面提到过的同源策略。 Tizen 仿真器和模拟器不会遵循同源策略。 AJAX 请求发送后，您需要验证是否返回的地理编码器状态是否正常，并查看该响应中是否有任何有效的值。

var locationForGeocoding = "London";
$.ajax({
	url : 'http://maps.googleapis.com/maps/api/geocode/json?address='
			+ locationForGeocoding + '&sensor=true',
	success : function(data) {
		if (google.maps.GeocoderStatus.OK === data.status
				&& data.results.length !== 0) {
			/**
			 * We take into account only first result returned from Google Maps
			 * API
			 */
			var foundLocation = data.results[0];
			console.log(foundLocation.geometry.location.lat);
			console.log(foundLocation.geometry.location.lng);
			// here we can use procedure to create map on a given container
		} else {
			console.error("Unable to find this location!");
		}
	}
});

e）计算距离

在本节中，我们将解释如何使用谷歌地图距离矩阵来找你周围最近的省会城市。  距离矩阵可以计算两个或更多位置之间的距离。 可以用可读的地址定义位置，如我们在示例中使用的城市名称"都灵"。 （在这种情况下，谷歌地理编码服务会自动将地址转换为地理坐标），或者你可以明确地使用地理坐标。 距离可以用两种方法计算：

• 使用谷歌的距离矩阵服务：这是一个更简单的方法，因为你不需要自己执行所有的服务器 AJAX 请求。
• 使用谷歌的距离矩阵API：它是通过发送简单的HTTP GET请求的Web服务访问。 这种方法稍微复杂一点，因为你必须自己执行 AJAX 调用。

在此示例中，我们将使用第一种方法。 我们将使用来自 DistanceMatrixService 对象的 getDistanceMatrix() 方法。 getDistanceMatrix（）方法需要两个数组： 第一个是原点的位置，第二个是目标位置。 距离矩阵 API 还允许您设置返回路线的排序顺序，例如，您可以找到最短的路线。  在我们的示例应用程序中，这意味着最近的省会城市将首先出现。

// this is the location given by the user
var origin = "Torino";
// this is an array with destination locations
// Google will use Geocoding to get coordinates
var locations = [{
        name : "London"
    }, {
        name : "Paris"
    }, {
        name : "Berlin"
    }, {
        name : "Moscow"
    }, {
        name : "Rome"
    }];
var service = new google.maps.DistanceMatrixService();
var destParsed=[];
// Google Distance Matrix service accepts only simple arrays, not JSON
// so we need to convert
for ( var i = 0; i < locations.length; i++) {
    destParsed[i] = locations[i].name;
}
service.getDistanceMatrix({
    origins : [ origin ],
    destinations : destParsed,
	// we are using DRIVING mode
    travelMode : google.maps.TravelMode.DRIVING,
    avoidHighways : false, // we don't want to avoid anything
    avoidTolls : false
    }, function(response, status) {
        if (status == google.maps.DistanceMatrixStatus.OK) {
            if (response.rows.length === 0) {
            console.err("Unable to get distance");
            return false;
            }
        // there is only one row so we can simply get it,
 // because there was only one origin location
        response = response.rows[0].elements;
    // because we do not want to change the original locations array
	// we can create a copy
        var locationsCopy = locations.slice();
        for (i = 0; i < locationsCopy.length; i++) {
            if (response[i].status === "OK")
                locationsCopy[i].distance = response[i].distance;
            else
            locationsCopy = locationsCopy.splice(1, i)
        }

        // sorting
        var sorted = locationsCopy.sort(function(a, b) {
            return a.distance.value - b.distance.value;
        });

        // here are our sorted results
        console.log(sorted);

        } else {
            console.error("Unable to get distance");
        }
});

f） 被动谷歌街景视图

我们在这篇文章中介绍的最后一个功能是谷歌街景视图。  谷歌街景用谷歌在2007年推出，它允许您查看支持的位置的全景街道图像。 您可以用两种不同的方式使用：

• 使用谷歌的街景图像 API：它允许您获取的所有可用目的地的静态图像。 您可以将基于位置的字符串传递给 API，而该 API 则将自动其转化为地理坐标。
• 使用谷歌街景服务：允许您以所有可用的功能访问街景。 不幸的是 Tizen 对其不支持

这里是第一个选项的示例代码。

// location to find the street view for
var loc = 'New York';
// your Google API key
var key = 'AIzaSyDdKjhStoKF6t0xxA_hFxYBmKrEb77b-nQ';
// if needed, we create img HTML element to put the street view in it
if ($('body').find('#streetViewImg').length === 0)
    $('body').append($(''));
// the browser will perform request for image
$('#streetViewImg').attr('src', 'http://maps.googleapis.com/maps/api/streetview?size=640x640&location=' + loc + '&sensor=true&key='+key);

var mapOptions = {
    center : new google.maps.LatLng(52.12, 54.23),
    zoom : 6,
    mapTypeId : google.maps.MapTypeId.HYBRID,
    streetViewControl : false // turns off Street View
};
var map = new google.maps.Map(document.getElementById('container'), mapOptions);

4 总结

在这篇文章中，我们讲解了如何在 Tizen web 应用程序中使用谷歌地图功能，如显示基本地图、搜索位置、计算距离和访问街景视图等。 我们还提供了一些提示，以便您能轻松容易地使用这些功能。 您可能已经看到，如果你的网站已经具备这些功能，要使它在 Tizen 上工作并不需要作很大的修改。事实上，您在移动设备上使用谷歌地图会比在台式机电脑上受益更多，因为移动设备的环境更适合于基于位置的应用程序。