动态展示Google map

最新推荐文章于 2014-08-20 13:42:00 发布

羊儿葫芦贝尔

最新推荐文章于 2014-08-20 13:42:00 发布

阅读量1.4k

点赞数

文章标签： js Google map

本文链接：https://blog.csdn.net/dongchongyang/article/details/9492683

版权

最近研究了一段Google map及其API的调用，google map api的文档在官网都有（https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-cn），都是开源的，查看很方便，Google map api需要用到js脚本，所以还是要有点js基础才行，先前没有接触过js，所以还是花了两天去研究了一下js的语法及编译环境，调试方法等。我这边js编写用的是notepad++（挺强大的，支持各种快捷键及自动运行浏览器运行调试，唯一不足的是不支持函数库识别，但是对于不常用js的同学也没关系），调试用的是IE8（虽然真不怎么好用，但是调试简单）。

环境搭好后，就是编码了，这边放出其中一个动态显示的效果代码。

<!DOCTYPE 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>Google Maps JavaScript API v3 Example: Geocoding Simple</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var path = null,timer = 0,index = 0,marker = null;
var markerCoordinates =[],arrayDates =[],loctype =[];
var geocoder;
var posNmae = [];

function initialize() {
  geocoder = new google.maps.Geocoder();
  directionsDisplay = new google.maps.DirectionsRenderer();
  var cenPos = new google.maps.LatLng(24.492107, 118.174301);
  var mapOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: cenPos
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  
  getPosDatas();
  setOptions();
}

//获取坐标数据
function getPosDatas()
{
	if(markerCoordinates==null)
	  markerCoordinates=[];
	if(arrayDates==null)
	  arrayDates=[];
	if(loctype==null)
	  loctype=[];
	  
	markerCoordinates.length=0,arrayDates.length=0,loctype.length=0;
	markerCoordinates.push(new google.maps.LatLng(24.492107, 118.174301));
	loctype.push(2);
	arrayDates.push("2012-08-21 17:30:53");
	markerCoordinates.push(new google.maps.LatLng(24.489208, 118.176750));
	loctype.push(1);
	arrayDates.push("2012-08-31 17:22:34");
	markerCoordinates.push(new google.maps.LatLng(24.440336, 118.088165));
	loctype.push(1);
	arrayDates.push("2012-09-04 17:35:58");
	markerCoordinates.push(new google.maps.LatLng(24.440336, 118.088165));
	loctype.push(1);
	arrayDates.push("2012-09-04 17:35:58");
	markerCoordinates.push(new google.maps.LatLng(24.490086, 118.178596));
	loctype.push(2);
	arrayDates.push("2012-09-07 10:19:48");
	markerCoordinates.push(new google.maps.LatLng(24.491570, 118.176964));
	loctype.push(2);
	arrayDates.push("2012-09-07 10:19:48");
	markerCoordinates.push(new google.maps.LatLng(24.490391, 118.178535));
	loctype.push(2);
	arrayDates.push("2012-09-07 10:19:48");
	markerCoordinates.push(new google.maps.LatLng(24.491590, 118.174889));
	loctype.push(2);
	arrayDates.push("2012-09-07 10:19:48");
	markerCoordinates.push(new google.maps.LatLng(24.491440, 118.169785));
	loctype.push(2);
	arrayDates.push("2012-09-07 10:19:48");
	markerCoordinates.push(new google.maps.LatLng(24.493748, 118.171455));
	loctype.push(2);
	arrayDates.push("2012-09-07 15:02:05");
	markerCoordinates.push(new google.maps.LatLng(29.622559, 106.514870));
	loctype.push(2);
	arrayDates.push("2012-09-10 12:59:42");
	markerCoordinates.push(new google.maps.LatLng(29.617416, 106.514381));
	loctype.push(2);
	arrayDates.push("2012-09-10 12:59:42");
	markerCoordinates.push(new google.maps.LatLng(29.621544, 106.514091));
	loctype.push(2);
	arrayDates.push("2012-09-10 16:14:28");
	markerCoordinates.push(new google.maps.LatLng(29.621519, 106.509460));
	loctype.push(2);
	arrayDates.push("2012-09-13 15:15:46");
	markerCoordinates.push(new google.maps.LatLng(29.621950, 106.512184));
	loctype.push(2);
	arrayDates.push("2012-09-13 15:15:46");
	markerCoordinates.push(new google.maps.LatLng(29.619066, 106.510490));
	loctype.push(2);
	arrayDates.push("2012-09-13 15:15:46");
	markerCoordinates.push(new google.maps.LatLng(29.618946, 106.512421));
	loctype.push(2);
	arrayDates.push("2012-09-13 15:15:46");
	markerCoordinates.push(new google.maps.LatLng(29.618151, 106.520103));
	loctype.push(2);
	arrayDates.push("2012-09-14 13:27:52");
	markerCoordinates.push(new google.maps.LatLng(29.619970, 106.512207));
	loctype.push(2);
	arrayDates.push("2012-09-14 13:27:52");
	markerCoordinates.push(new google.maps.LatLng(24.489609, 118.173454));
	loctype.push(2);
	arrayDates.push("2012-10-15 17:57:01");
}

//设置选项的值，object.options.add(new Option("文本","值")); //这个兼容IE与firefox
function setOptions()
{
	var object=document.getElementById('start');
	for(var i = 0; i < markerCoordinates.length; i++)
	{
		object.options.add(new Option(arrayDates[i],markerCoordinates[i])); //这个兼容IE与firefox
	}
	
	object=document.getElementById('end');
	for(var i = 0; i < markerCoordinates.length; i++)
	{
		object.options.add(new Option(arrayDates[i],markerCoordinates[i])); //这个兼容IE与firefox
	}
}

//计算标记行走路线
function calcRoute() 
{
  var start = document.getElementById('start').value;
  var startNum = document.getElementById('start').selectedIndex;
  
  var end = document.getElementById('end').value;
  var endNum = document.getElementById('end').selectedIndex;
  
  var waypts = [];
  for(var i = startNum + 1; i < endNum; i++)
  {
	waypts.push({
	  location:markerCoordinates[i],
	  stopover:true});
  }

  var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  
  var speed = 0;
  speed = document.getElementById('speed').value;
  window.clearInterval(timer);
  
  setPath(request, speed);

}

//绘制标记线路图
function setPath(pathMode,tagSpeed)
{
	directionsService.route(pathMode, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) 
		{
			directionsDisplay.setDirections(response);
			path = response.routes[0].overview_path;
			if (!path) 
		    {
				return;
			}
			timer = window.setInterval(function(){
				if (!marker) 
				{
					marker = new google.maps.Marker({ position: path[index++], map: map });
				} 
				else 
				{					
					if(index < path.length)
					{
						marker.setPosition(path[index++]);
					}
					else
					{
						index = 0;
						window.clearInterval(timer);
					}
				}
			}, tagSpeed);
		}
	});
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
	<div id="panel">
    <b>起点:</b>
    <select id="start">
    </select>
	
    <b>终点:</b>
    <select id="end">
    </select>
	
	<b>速度:</b>
    <select id="speed">
	  <option value="1">超快速</option>
      <option value="30">快速</option>
	  <option value="100">正常</option>
	  <option value="500">慢速</option>
	  <option value="1000">超慢速</option>
    </select>
	
	<input type="submit" οnclick="calcRoute();">
    </div>
    <div id="map-canvas"></div>
    </div>
  </body>
</html>

这边调用了Google map的线路服务，这个服务的优势是服务器可以根据需求选择最优的路径（这边路线出行方式有

DRIVING/BICYCLING/TRANSIT/WALKING），调用起来很方便，但是在实现的过程发现一个很郁闷的问题，

谷歌地图的线路服务的方式是首先确定起终点，起终点间可以设置路标，但是路标+起终点数 <= 10。

下面就是这个脚本的运行效果，可以自行选择起终点（但是起终点间隔M<10），另外可以在运行过程自行调节

播放的速度。