Google maps 谷歌地图V3-航路点+；带有随机文本的信息窗口
我用这个例子设置了一条有超过8个标记的路线Google maps 谷歌地图V3-航路点+；带有随机文本的信息窗口,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,我用这个例子设置了一条有超过8个标记的路线 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Google Maps JavaScript API v3 Example: Directions
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
<style>
#map{
width: 100%;
height: 450px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
jQuery(function() {
var stops = [
{"Geometry":{"Latitude":52.1615470947258,"Longitude":20.80514430999756}},
{"Geometry":{"Latitude":52.15991486090931,"Longitude":20.804049968719482}},
{"Geometry":{"Latitude":52.15772967999426,"Longitude":20.805788040161133}},
{"Geometry":{"Latitude":52.15586034371232,"Longitude":20.80460786819458}},
{"Geometry":{"Latitude":52.15923693975469,"Longitude":20.80113172531128}},
{"Geometry":{"Latitude":52.159849043774074, "Longitude":20.791990756988525}},
{"Geometry":{"Latitude":52.15986220720892,"Longitude":20.790467262268066}},
{"Geometry":{"Latitude":52.16202095784738,"Longitude":20.7806396484375}},
{"Geometry":{"Latitude":52.16088894313116,"Longitude":20.77737808227539}},
{"Geometry":{"Latitude":52.15255590234335,"Longitude":20.784244537353516}},
{"Geometry":{"Latitude":52.14747369312591,"Longitude":20.791218280792236}},
{"Geometry":{"Latitude":52.14963304460396,"Longitude":20.79387903213501}}
] ;
var map = new window.google.maps.Map(document.getElementById("map"));
// new up complex objects before passing them around
var directionsDisplay = new window.google.maps.DirectionsRenderer();
var directionsService = new window.google.maps.DirectionsService();
Tour_startUp(stops);
window.tour.loadMap(map, directionsDisplay);
window.tour.fitBounds(map);
if (stops.length > 1)
window.tour.calcRoute(directionsService, directionsDisplay);
});
function Tour_startUp(stops) {
if (!window.tour) window.tour = {
updateStops: function (newStops) {
stops = newStops;
},
// map: google map object
// directionsDisplay: google directionsDisplay object (comes in empty)
loadMap: function (map, directionsDisplay) {
var myOptions = {
zoom: 13,
center: new window.google.maps.LatLng(51.507937, -0.076188), // default to London
mapTypeId: window.google.maps.MapTypeId.ROADMAP
};
map.setOptions(myOptions);
directionsDisplay.setMap(map);
},
fitBounds: function (map) {
var bounds = new window.google.maps.LatLngBounds();
// extend bounds for each record
jQuery.each(stops, function (key, val) {
var myLatlng = new window.google.maps.LatLng(val.Geometry.Latitude, val.Geometry.Longitude);
bounds.extend(myLatlng);
});
map.fitBounds(bounds);
},
calcRoute: function (directionsService, directionsDisplay) {
var batches = [];
var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
var itemsCounter = 0;
var wayptsExist = stops.length > 0;
while (wayptsExist) {
var subBatch = [];
var subitemsCounter = 0;
for (var j = itemsCounter; j < stops.length; j++) {
subitemsCounter++;
subBatch.push({
location: new window.google.maps.LatLng(stops[j].Geometry.Latitude, stops[j].Geometry.Longitude),
stopover: true
});
if (subitemsCounter == itemsPerBatch)
break;
}
itemsCounter += subitemsCounter;
batches.push(subBatch);
wayptsExist = itemsCounter < stops.length;
// If it runs again there are still points. Minus 1 before continuing to
// start up with end of previous tour leg
itemsCounter--;
}
// now we should have a 2 dimensional array with a list of a list of waypoints
var combinedResults;
var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
var directionsResultsReturned = 0;
for (var k = 0; k < batches.length; k++) {
var lastIndex = batches[k].length - 1;
var start = batches[k][0].location;
var end = batches[k][lastIndex].location;
// trim first and last entry from array
var waypts = [];
waypts = batches[k];
waypts.splice(0, 1);
waypts.splice(waypts.length - 1, 1);
var request = {
origin: start,
destination: end,
waypoints: waypts,
travelMode: window.google.maps.TravelMode.WALKING
};
(function (kk) {
directionsService.route(request, function (result, status) {
if (status == window.google.maps.DirectionsStatus.OK) {
var unsortedResult = { order: kk, result: result };
unsortedResults.push(unsortedResult);
directionsResultsReturned++;
if (directionsResultsReturned == batches.length) // we've received all the results. put to map
{
// sort the returned values into their correct order
unsortedResults.sort(function (a, b) { return parseFloat(a.order) - parseFloat(b.order); });
var count = 0;
for (var key in unsortedResults) {
if (unsortedResults[key].result != null) {
if (unsortedResults.hasOwnProperty(key)) {
if (count == 0) // first results. new up the combinedResults object
combinedResults = unsortedResults[key].result;
else {
// only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
// directionResults object, but enough to draw a path on the map, which is all I need
combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
}
count++;
}
}
}
directionsDisplay.setDirections(combinedResults);
}
}
});
})(k);
}
}
};
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
谷歌地图JavaScript API v3示例：方向航路点
#地图{
宽度：100%；
高度：450px；
}
jQuery（函数（）{
变量停止=[
{“几何学”：{“纬度”：52.1615470947258，“经度”：20.8051443099756}，
{“几何学”：{“纬度”：52.15991486090931，“经度”：20.804049968719482}，
{“几何学”：{“纬度”：52.1577297999426，“经度”：20.8057880401133}，
{“几何学”：{“纬度”：52.15586034371232，“经度”：20.80460786819458}，
{“几何学”：{“纬度”：52.15923693975469，“经度”：20.80113172531128}，
{“几何学”：{“纬度”：52.159849043774074，“经度”：20.791990756988525}，
{“几何学”：{“纬度”：52.15986220720892，“经度”：20.790467262268066}，
{“几何学”：{“纬度”：52.16202095784738，“经度”：20.78063964375}，
{“几何学”：{“纬度”：52.16088894313116，“经度”：20.7773780827539}，
{“几何学”：{“纬度”：52.1525559024335，“经度”：20.7842445373516}，
{“几何学”：{“纬度”：52.14747369312591，“经度”：20.791218280792236}，
{“几何学”：{“纬度”：52.1496304460396，“经度”：20.79387903213501}
] ;
var map=newwindow.google.maps.map（document.getElementById（“map”）；
//在传递复杂对象之前，先创建新对象
var directionsDisplay=new window.google.maps.DirectionsRenderer（）；
var directionsService=new window.google.maps.directionsService（）；
巡更启动（停止）；
window.tour.loadMap（地图、方向显示）；
window.tour.fitBounds（地图）；
如果（停止。长度>1）
window.tour.calcRoute（directionsService，directionsDisplay）；
});
功能巡更器启动（停止）{
如果（！window.tour）window.tour={
updateStops:函数（newStops）{
站点=新闻头条；
},
//地图：谷歌地图对象
//directionsDisplay:google directionsDisplay对象（为空）
loadMap：功能（地图、方向显示）{
变量myOptions={
缩放：13，
中心：newwindow.google.maps.LatLng（51.507937，-0.076188），//默认为伦敦
mapTypeId:window.google.maps.mapTypeId.ROADMAP
};
map.setOptions（myOptions）；
方向显示.setMap（地图）；
},
fitBounds:函数（映射）{
var bounds=new window.google.maps.LatLngBounds（）；
//扩展每个记录的边界
jQuery.each（停止，函数（键，val）{
var myLatlng=new window.google.maps.LatLng（val.Geometry.lation，val.Geometry.Longitude）；
扩展（myLatlng）；
});
映射边界（bounds）；
},
calcRoute：函数（方向服务、方向显示）{
var批次=[]；
var itemsPerBatch=10；//google API max=10-1个起点、1个终点和8个航路点
var ItemsCenter=0；
var wayptsExist=停止。长度>0；
while（性别歧视者）{
var子批次=[]；
var SubItemsCenter=0；
对于（var j=ItemsCenter；j