如何在驾驶模式下创建折线:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1
/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<!--http://www.askdata.net/propmap/mapdata.php-->
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
//<![CDATA[
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var image = new google.maps.MarkerImage('http://Violette.com/MapFiles
/Icons.png');
//var side_bar_html = "";
//var gmarkers = [];
function load() {
directionsDisplay = new google.maps.DirectionsRenderer();
//directionsDisplay.setMap(map);
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(11.342339,77.727497), //'mapTypeControlOptions':
{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},
zoom: 12,
mapTypeId: 'roadmap'
});
directionsDisplay.setMap(map);
var infoWindow = new google.maps.InfoWindow;
var sidebar = document.getElementById('sidebar');
var point = [];
var point1 = [];
var path = [];
//var waypoints = [];
//var school = document.getElementById("school").value;
downloadUrl("support.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("point");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("s_name");
var img5 = markers[i].getAttribute("image_type");
var school = markers[i].getAttribute("school");
var type = markers[i].getAttribute("type");
point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + type + "</b>";
var image_in = "<img src='http://sundar.lan/tele3/images/"+ img5 + "'/>";
var icon = type;
var marker = new google.maps.Marker({
map: map,
position: point,
draggable: true,
icon: icon.icon
});
var name = '<h3>' + "Students :" +'</h3>'+'<h4>' + name +'</h4>';
//var img = '<h3>' +'<b>' + img5 + '</b>'+'</h3>';
bindInfoWindow(marker, map, infoWindow, name,image_in);
// var sidebarEntry = createSidebarEntry(marker, type);
sidebar.appendChild(createSidebarEntry(marker,type));
}
for (var j = 0; j < markers.length; j++) {
point1[j] = new google.maps.LatLng(
parseFloat(markers[j].getAttribute("lat")),
parseFloat(markers[j].getAttribute("lng")));
var flight = new google.maps.Polyline({
path: point1,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight:2
});
flight.setMap(map);
calcRoute(point1);
console.log(point1);
}
});
function createSidebarEntry(marker,type) {
var div = document.createElement('div');
var html = '<h2>' +'<b>' + type + '</b>'+'</h2>';
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'click', function() {
google.maps.event.trigger(marker, 'click');
});
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
}
function bindInfoWindow(marker,map, infoWindow, name,image_in) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(name + image_in);
infoWindow.open(map, marker);
});
}
function calcRoute(path) {
//alert(path);
for(var k=0; k<path.length-1; k++)
{
var waypoints = [];
//alert(k);
var request = {
origin:path[k],
destination:path[k+1],
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
//selected_path =
selected_path.concat(results.routes[0].overview_path);
}
/*else {
// alert an error message when the route could nog be calculated.
if (status == 'ZERO_RESULTS') {
alert('No route could be found between the origin and destination.');
} else if (status == 'UNKNOWN_ERROR') {
alert('A directions request could not be processed due to a server error. The
request may succeed if you try again.');
} else if (status == 'REQUEST_DENIED') {
alert('This webpage is not allowed to use the directions service.');
} else if (status == 'OVER_QUERY_LIMIT') {
alert('The webpage has gone over the requests limit in too short a period of
time.');
} else if (status == 'NOT_FOUND') {
alert('At least one of the origin, destination, or waypoints could not be
geocoded.');
} else if (status == 'INVALID_REQUEST') {
alert('The DirectionsRequest provided was invalid.');
} else {
alert("There was an unknown error in your request. Requeststatus: nn"+status);
}
}*/
});
}
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load();">
<!--<div style="width:1200px; font-family:Arial, sans-serif; font-size:11px;
border:2px solid #999;">
<div align="center" style="width:1200px; height:50px; font-family:Arial, sans-serif;
font-size:11px; border:3px solid #CCC; color:#0099CC;"><h1>Students stop list's</h1>
</div>
-->
<div style="color:#09F; margin-left:550px;"><h2>Students stop list's</h2></div>
<table style="border:#999999 2px solid;">
<tbody>
<tr id="cm_mapTR">
<td width="200" valign="top">
<!--<b>Select:</b><select name="school" id="school" onChange="load();">
<option value="">--Select--</option>
<option value="1">BNKN</option>
<option value="2">SEVENTH DAY</option>
</select>-->
<div id="sidebar" style="overflow: auto; height: 520px; font-size: 11px; color:
#000;"></div>
</td>
<td> <div id="map" style="overflow: hidden; width: 1150px; height: 520px;
border:2px solid #999;"></div> </td>
</tr>
</tbody>
</table>
<!--</div>-->
</body>
</html>
<markers><line colour="#008800" width="8" html="You clicked the green polyline"><point
lat="11.3135" lng="77.6658" type="BUS:0001" s_name="Sundar,Arul,Praveen"
image_type="images2.jpg"/><point lat="11.3149" lng="77.6687" type="BUS:0001"
s_name="Laxman,Dravid,Ganguly" image_type="images2.jpg"/><point lat="11.3174"
lng="77.6718" type="BUS:0001" s_name="Vijay,Ajith,Surya" image_type="images2.jpg"/>
<point lat="11.3203" lng="77.6751" type="BUS:0001" s_name="Vikram,Ravi,Krishna"
image_type="images2.jpg"/><point lat="11.3227" lng="77.6804" type="BUS:0001"
s_name="Simbu,Dhanush,Velu" image_type="images2.jpg"/><point lat="11.3264"
lng="77.6911" type="BUS:0001" s_name="Sham,Jagan,karan" image_type="images2.jpg"/>
<point lat="11.3349" lng="77.7078" type="BUS:0001" s_name="siva,sarvesh,kasi"
image_type="images2.jpg"/><point lat="11.3409" lng="77.7171" type="BUS:0001"
s_name="Rajan,Rajesh,Pandi" image_type="images2.jpg"/><point lat="11.3481"
lng="77.7190" type="BUS:0001" s_name="Mugan,Natraj,Balan" image_type="images2.jpg"/>
<point lat="11.3449" lng="77.7269" type="BUS:0001" s_name="karthik,sampath,udhay"
mage_type="images2.jpg"/><point lat="11.3418" lng="77.7283" type="BUS:0001"
s_name="Lal,Kannan,Khan" image_type="images2.jpg"/><point lat="11.3578" lng="77.7370"
type="BUS:0001" s_name="Suresh,Dinesh,Vengadesh" image_type="images2.jpg"/><point
lat="11.3649" lng="77.7484" type="BUS:0001" s_name="Jay,Prabu,Dana"
image_type="images2.jpg"/><point lat="11.3671" lng="77.7649" type="BUS:0001"
s_name="Naveen,Muthu,Kumar" image_type="images2.jpg"/><point lat="11.3621"
lng="77.7808" type="BUS:0001" s_name="Poun,Buvan,Mari" image_type="images2.jpg"/>
<point lat="11.3654" lng="77.8014" type="BUS:0001" s_name="Chandru,Sakthi,Sekar"
image_type="images2.jpg"/><point lat="11.3637" lng="77.8262" type="BUS:0001"
s_name="Soundar,Balu,Babu" image_type="images2.jpg"/><point lat="11.3657"
lng="77.8429" type="BUS:0001" s_name="Tamil,Selva,Sasi" image_type="images2.jpg"/>
<point lat="11.3654" lng="77.8560" type="BUS:0001" s_name="Rahim,Ibrahim,Mohmed"
image_type="images2.jpg"/><point lat="11.3741" lng="77.8785" type="BUS:0001"
s_name="Hari,Nagaraj.Bethana" image_type="images2.jpg"/><point lat="11.3784"
lng="77.8947" type="BUS:0001" s_name="Mani,Sheik,Win" image_type="images2.jpg"/><point
lat="11.3711" lng="77.8908" type="BUS:0001" s_name="Rajesh,Saravanan,Prakash"
image_type="images2.jpg"/><point lat="11.368994" lng="77.888321" type="BUS:0001"
s_name="Bethu,Sri,Naveen" image_type="images2.jpg"/></line></markers>