Tizen 上的谷歌地图

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/

示例应用程序的屏幕快照

示例应用程序的屏幕快照

大量使用 AJAX 调用和访问远程服务器的 API 的 Web 应用程序应该执行按需互联网连接的核查机制。 在 Tizen,你可以使用 tizen.systeminfo 设备 API。 有关详细信息,请参阅在./js/lib/internal/network.js 文件中的 isInternetConnection 方法。
提示
jQuery Mobile 的框架专门用来通过 HTTP 协议处理来自 HTTP 服务器的网页,而 Tizen 的应用程序设计用于使用 FILE 协议。 因此,我们建议您关闭使用页面过渡效果的 AJAX 页面请求,因为它们无法与 FILE 协议协同工作。  请记住这只是网页过渡,你可以在 Tizen 上对其他操作正常使用 AJAX 请求。

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($('StreetView'));
// 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);
提示 - 我们建议关闭 Tizen Web 应用程序中显示的所有地图的谷歌街景(默认情况下是打开的)。 目前,使用最复杂的用户界面的谷歌街景的性能在 Tizen 上并不够。

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);
提示 - 在每个 jQuery Mobile 项目中,视口设置是必不可少的。 装备 Tizen 的设备的当前最大分辨率为 720p,即 720 x 1280。 不幸的是, jQuery Mobile 用户界面在这样的设置下显得很小,而且触控屏幕元素的 UX 也很差。 720p 分辨率的视口元素配置。       

所以我们建议以下列视口设置使用较低的分辨率 360×640:

4 总结

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

文件附件: