JavaScript 谷歌地图 - 使用Javascript获取移动设备的路线

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 谷歌地图 - 使用Javascript获取移动设备的路线相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />	
	
	<title>Demo</title>
	
	<script type="text/javascript" src="_assets/js/plugins/modernizr-1.5.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>	

	<script type="text/javascript">
	
		var directionDisplay;
		var directionsService = new google.maps.DirectionsService();
		var map;

		function getLocation() {
			if (Modernizr.geolocation) {
				navigator.geolocation.getCurrentPosition(show_map);		
			} else {
				alert("Sorry your browser does not support location services.");
				location.href = "index.html";
			}
		}
  
	  function show_map(position) {
	  
		var latitude = position.coords.latitude,
			longitude = position.coords.longitude,
			device_location = latitude + "," + longitude;
		
		directionsDisplay = new google.maps.DirectionsRenderer();
		var nz = new google.maps.LatLng(-36.788164, 174.849029);
		var myOptions = {
		  zoom:7,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  center: nz
		}
		
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		directionsDisplay.setMap(map);
		//destination is hard coded for example - you could add a qs listener...
		calcRoute(device_location,"100 Queen Street, Auckland");
		
	  }
  
	function calcRoute(starthere,endhere) {

		var start = starthere
		var end = endhere
		var request = {
			origin:start, 
			destination:end,
			travelMode: google.maps.DirectionsTravelMode.DRIVING
		};

		directionsService.route(request, function(response, status) {
			if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setDirections(response);
			}
		});
	}
	
</script>
		
	</head>
	
	<body onload="getLocation()">
		<div id="map_canvas"></div>
	</body>
</html>

以上是关于JavaScript 谷歌地图 - 使用Javascript获取移动设备的路线的主要内容,如果未能解决你的问题,请参考以下文章

谷歌离线地图:不是瓷砖而是javascript

如何使用javascript在谷歌地图中的多个标记之间绘制路线图

谷歌 Javascript 地图 v3

减少谷歌地图成本计算,只能调用谷歌地图javascript api

Django:在谷歌地图的 javascript 中使用模板标签

如何使用 JavaScript 制作用户当前位置的谷歌地图