使用 Google 地图 API 在标记之间绘制路线
Drawing routes between markers using Google map API
我想使用Google地图API在地图中每两点之间绘制一条路线。
如果你只是想根据一组点（坐标）画线，你可以使用简单的集合多段线，如此example but if you want to get the road routes that connect the two points you have to delve into the service google maps directions Here a link introductory
var polylineOptions = {
strokeColor: routeColor,
strokeOpacity: 0.5,
strokeWeight: 8
};
var rendererOptions = {
draggable: false,
polylineOptions: polylineOptions,
suppressMarkers: true,
preserveViewport: true
};
routePoly = new google.maps.Polyline(polylineOptions);
routeRenderer = new google.maps.DirectionsRenderer(rendererOptions);
routePoly.setPath(new Array());
var polyPath = routePoly.getPath();
for (var i = 0; i< coordinates.length ; i++){
polyPath.push(coordinates.latLng);
}
routePoly.setMap(map);
___UPDATE___
您要求 HTML。问题是 HTML 是动态的。我会post初始版本。我那里还有很多其他 div，但它们对您的情况并不重要。 （我知道这是我的 HTML 的基本内容，但它会根据用户操作动态生成）。无论如何，唯一对您重要的 div 是 map-canvas。 Google Map 要求此 div 存在并在那里绘制 MAP 和其他奇特的东西。
<!doctype html>
<html lang="en">
<body>
<div id="wholeBody">
<div id="map-canvas">
</div>
</div>
</body>
</html>
这是我对这个问题的所有问题的完整回答：
<div class="paths">
<a class="path" style="border-left: 6px solid #000000;"
href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))"
start="24.468498279212913,39.615068435668945"
end="24.45985083570312,39.66432183980942"
color="#000000"
ide="5"
>
Alkhaldia/King abdulaziz road </a>
<a class="path" style="border-left: 6px solid #ff0000;"
href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))"
start="24.471681716990837,39.61108535528183"
end="24.501539614912353,39.61090564727783"
color="#ff0000"
ide="6"
>
Saied Al Shuhada </a>
<a class="path" style="border-left: 6px solid #00b1ff;"
href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))"
start="24.46727273186149,39.606807231903076"
end="24.462189756758278,39.545153975486755"
color="#00b1ff"
ide="7"
>
Sport City </a>
<a class="path" style="border-left: 6px solid #ffa900;"
href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))"
start="24.467270,39.606753"
end="24.422826,39.520943"
color="#ffa900"
ide="8"
>
Al duaitha </a>
<a class="path" style="border-left: 6px solid #41ff00;"
href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))"
start="24.46727273186149,39.606807231903076"
end="24.41422098604895,39.62093710899353"
color="#41ff00"
ide="9"
>
Alia Mall </a>
<select style="display: none;" id="points_5">
<option value="24.459040260025855,39.65409994125366"></option><option value="24.47105675396141,39.64922904968262"></option> </select>
<select style="display: none;" id="points_6">
</select>
<select style="display: none;" id="points_7">
<option value="24.472355501781344,39.54960644245148"></option> </select>
<select style="display: none;" id="points_8">
<option value="24.420433,39.530202"></option><option value="24.472325,39.549333"></option> </select>
<select style="display: none;" id="points_9">
</select>
</div>
<div class="map_fullscreen" id="map_canvas"></div>
<script type="text/javascript">
var markers = [
[24.46727273186149,39.606807231903076, 'Al salam Stop', '1'],
[24.422826,39.520943, 'ALduaytha Station', '2'],
[24.462189756758278,39.545153975486755, 'Prince Mohammed Spor City Station', '2'],
[24.468498279212913,39.615068435668945, 'Al Baqee Stop', '1'],
[24.467275173202733,39.6067750453949, 'Al salam Stop', '1'],
[24.467270,39.606753, 'Al salam Stop', '1'],
[24.41422098604895,39.62093710899353, 'Alia Mall Station', '2'],
[24.472316441891955,39.54898953437805, 'Turn Left', '0'],
[24.420433,39.530202, 'Turn Left', '0'],
[24.46727273186149,39.606807231903076, 'Al salam Stop', '1'],
[24.46953339357955,39.63470220565796, 'Turn Left', '0'],
[24.472355501781344,39.54960644245148, 'Turn Right', '0'],
[24.47195513734061,39.548882246017456, 'Turn Left', '0'],
[24.421215736553147,39.5303213596344, 'Turn Right', '0'],
[24.462189756758278,39.545153975486755, 'Prince Mohammed Spor City Station', '2'],
[24.46727273186149,39.606807231903076, 'Al salam Stop', '1'],
[24.472325,39.549333, 'Al Salam Road', '0'],
[24.458810758735982,39.65430110692978, 'Turn left', '0'],
[24.467270,39.606753, 'Al salam Stop', '1'],
[24.45985083570312,39.66432183980942, 'Al Khaledia Station', '2'],
[24.422826,39.520943, 'ALduaytha Station', '2'],
[24.501539614912353,39.61090564727783, 'Saied Alshuhada station', '2'],
[24.471681716990837,39.61108535528183, 'Saied Alshuhada', '1'],
[24.45985083570312,39.66432183980942, 'Al Khaledia Station', '2'],
[24.459040260025855,39.65409994125366, 'Prince MOhammed ben Abdulaziz', '0'],
[24.47105675396141,39.64922904968262, 'Turn left', '0'],
[24.471681716990837,39.61108535528183, 'Saied Alshuhada Stop', '1'],
[24.468498279212913,39.615068435668945, 'Al Baqee Stop', '1'],
[24.501539614912353,39.61090564727783, 'Saied Alshuhada Station', '2'],
];
var rendererOptions;
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'You Are Here !'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
var mapOptions = {
center: new google.maps.LatLng(24.4676711,39.610379),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
disableDefaultUI: true,
scaleControl: true,
styles: [{featureType: "landscape", stylers: [{saturation: -100}, {lightness: 65}, {visibility: "on"}]}, {featureType: "poi", stylers: [{saturation: -100}, {lightness: 51}, {visibility: "simplified"}]}, {featureType: "road.highway", stylers: [{saturation: -100}, {visibility: "simplified"}]}, {featureType: "road.arterial", stylers: [{saturation: -100}, {lightness: 30}, {visibility: "on"}]}, {featureType: "road.local", stylers: [{saturation: -100}, {lightness: 40}, {visibility: "on"}]}, {featureType: "transit", stylers: [{saturation: -100}, {visibility: "simplified"}]}, {featureType: "administrative.province", stylers: [{visibility: "off"}]/**/}, {featureType: "administrative.locality", stylers: [{visibility: "off"}]}, {featureType: "administrative.neighborhood", stylers: [{visibility: "on"}]/**/}, {featureType: "water", elementType: "labels", stylers: [{visibility: "on"}, {lightness: -25}, {saturation: -100}]}, {featureType: "water", elementType: "geometry", stylers: [{hue: "#ffff00"}, {lightness: -25}, {saturation: -97}]}]
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow({
maxWidth: 500,
});
var marker;
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; ++i) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][0], markers[i][1]),
map: map,
title:markers[i][2],
icon: 'images/'+markers[i][3]+'_icn.png' ,
optimized: false
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][2]);
infowindow.open(map, marker);
}
})(marker, i));
bounds.extend(new google.maps.LatLng(markers[i][0], markers[i][1]));
}
map.fitBounds(bounds);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
function calcRoute(ss, ee, color, ide) {
rendererOptions = {
suppressMarkers : true,
polylineOptions: {
strokeColor: color
}
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var start = ee.toString();
var end = ss.toString();
var waypts = [];
var checkboxArray = document.getElementById('points_'+ide);
for (var i = 0; i < checkboxArray.length; i++) {
waypts.push({
location:checkboxArray[i].value,
stopover:true});
}
var request = {
origin:start,
destination:end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function clearWaypoints() {
origin = null;
destination = null;
waypoints = [];
directionsVisible = false;
}
function reset() {
clearWaypoints();
directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
</script>
我想使用Google地图API在地图中每两点之间绘制一条路线。
如果你只是想根据一组点（坐标）画线，你可以使用简单的集合多段线，如此example but if you want to get the road routes that connect the two points you have to delve into the service google maps directions Here a link introductory
var polylineOptions = {
strokeColor: routeColor,
strokeOpacity: 0.5,
strokeWeight: 8
};
var rendererOptions = {
draggable: false,
polylineOptions: polylineOptions,
suppressMarkers: true,
preserveViewport: true
};
routePoly = new google.maps.Polyline(polylineOptions);
routeRenderer = new google.maps.DirectionsRenderer(rendererOptions);
routePoly.setPath(new Array());
var polyPath = routePoly.getPath();
for (var i = 0; i< coordinates.length ; i++){
polyPath.push(coordinates.latLng);
}
routePoly.setMap(map);
___UPDATE___
您要求 HTML。问题是 HTML 是动态的。我会post初始版本。我那里还有很多其他 div，但它们对您的情况并不重要。 （我知道这是我的 HTML 的基本内容，但它会根据用户操作动态生成）。无论如何，唯一对您重要的 div 是 map-canvas。 Google Map 要求此 div 存在并在那里绘制 MAP 和其他奇特的东西。
<!doctype html>
<html lang="en">
<body>
<div id="wholeBody">
<div id="map-canvas">
</div>
</div>
</body>
</html>
这是我对这个问题的所有问题的完整回答：
<div class="paths">
<a class="path" style="border-left: 6px solid #000000;"
href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))"
start="24.468498279212913,39.615068435668945"
end="24.45985083570312,39.66432183980942"
color="#000000"
ide="5"
>
Alkhaldia/King abdulaziz road </a>
<a class="path" style="border-left: 6px solid #ff0000;"
href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))"
start="24.471681716990837,39.61108535528183"
end="24.501539614912353,39.61090564727783"
color="#ff0000"
ide="6"
>
Saied Al Shuhada </a>
<a class="path" style="border-left: 6px solid #00b1ff;"
href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))"
start="24.46727273186149,39.606807231903076"
end="24.462189756758278,39.545153975486755"
color="#00b1ff"
ide="7"
>
Sport City </a>
<a class="path" style="border-left: 6px solid #ffa900;"
href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))"
start="24.467270,39.606753"
end="24.422826,39.520943"
color="#ffa900"
ide="8"
>
Al duaitha </a>
<a class="path" style="border-left: 6px solid #41ff00;"
href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))"
start="24.46727273186149,39.606807231903076"
end="24.41422098604895,39.62093710899353"
color="#41ff00"
ide="9"
>
Alia Mall </a>
<select style="display: none;" id="points_5">
<option value="24.459040260025855,39.65409994125366"></option><option value="24.47105675396141,39.64922904968262"></option> </select>
<select style="display: none;" id="points_6">
</select>
<select style="display: none;" id="points_7">
<option value="24.472355501781344,39.54960644245148"></option> </select>
<select style="display: none;" id="points_8">
<option value="24.420433,39.530202"></option><option value="24.472325,39.549333"></option> </select>
<select style="display: none;" id="points_9">
</select>
</div>
<div class="map_fullscreen" id="map_canvas"></div>
<script type="text/javascript">
var markers = [
[24.46727273186149,39.606807231903076, 'Al salam Stop', '1'],
[24.422826,39.520943, 'ALduaytha Station', '2'],
[24.462189756758278,39.545153975486755, 'Prince Mohammed Spor City Station', '2'],
[24.468498279212913,39.615068435668945, 'Al Baqee Stop', '1'],
[24.467275173202733,39.6067750453949, 'Al salam Stop', '1'],
[24.467270,39.606753, 'Al salam Stop', '1'],
[24.41422098604895,39.62093710899353, 'Alia Mall Station', '2'],
[24.472316441891955,39.54898953437805, 'Turn Left', '0'],
[24.420433,39.530202, 'Turn Left', '0'],
[24.46727273186149,39.606807231903076, 'Al salam Stop', '1'],
[24.46953339357955,39.63470220565796, 'Turn Left', '0'],
[24.472355501781344,39.54960644245148, 'Turn Right', '0'],
[24.47195513734061,39.548882246017456, 'Turn Left', '0'],
[24.421215736553147,39.5303213596344, 'Turn Right', '0'],
[24.462189756758278,39.545153975486755, 'Prince Mohammed Spor City Station', '2'],
[24.46727273186149,39.606807231903076, 'Al salam Stop', '1'],
[24.472325,39.549333, 'Al Salam Road', '0'],
[24.458810758735982,39.65430110692978, 'Turn left', '0'],
[24.467270,39.606753, 'Al salam Stop', '1'],
[24.45985083570312,39.66432183980942, 'Al Khaledia Station', '2'],
[24.422826,39.520943, 'ALduaytha Station', '2'],
[24.501539614912353,39.61090564727783, 'Saied Alshuhada station', '2'],
[24.471681716990837,39.61108535528183, 'Saied Alshuhada', '1'],
[24.45985083570312,39.66432183980942, 'Al Khaledia Station', '2'],
[24.459040260025855,39.65409994125366, 'Prince MOhammed ben Abdulaziz', '0'],
[24.47105675396141,39.64922904968262, 'Turn left', '0'],
[24.471681716990837,39.61108535528183, 'Saied Alshuhada Stop', '1'],
[24.468498279212913,39.615068435668945, 'Al Baqee Stop', '1'],
[24.501539614912353,39.61090564727783, 'Saied Alshuhada Station', '2'],
];
var rendererOptions;
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'You Are Here !'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
var mapOptions = {
center: new google.maps.LatLng(24.4676711,39.610379),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
disableDefaultUI: true,
scaleControl: true,
styles: [{featureType: "landscape", stylers: [{saturation: -100}, {lightness: 65}, {visibility: "on"}]}, {featureType: "poi", stylers: [{saturation: -100}, {lightness: 51}, {visibility: "simplified"}]}, {featureType: "road.highway", stylers: [{saturation: -100}, {visibility: "simplified"}]}, {featureType: "road.arterial", stylers: [{saturation: -100}, {lightness: 30}, {visibility: "on"}]}, {featureType: "road.local", stylers: [{saturation: -100}, {lightness: 40}, {visibility: "on"}]}, {featureType: "transit", stylers: [{saturation: -100}, {visibility: "simplified"}]}, {featureType: "administrative.province", stylers: [{visibility: "off"}]/**/}, {featureType: "administrative.locality", stylers: [{visibility: "off"}]}, {featureType: "administrative.neighborhood", stylers: [{visibility: "on"}]/**/}, {featureType: "water", elementType: "labels", stylers: [{visibility: "on"}, {lightness: -25}, {saturation: -100}]}, {featureType: "water", elementType: "geometry", stylers: [{hue: "#ffff00"}, {lightness: -25}, {saturation: -97}]}]
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow({
maxWidth: 500,
});
var marker;
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; ++i) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][0], markers[i][1]),
map: map,
title:markers[i][2],
icon: 'images/'+markers[i][3]+'_icn.png' ,
optimized: false
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][2]);
infowindow.open(map, marker);
}
})(marker, i));
bounds.extend(new google.maps.LatLng(markers[i][0], markers[i][1]));
}
map.fitBounds(bounds);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
function calcRoute(ss, ee, color, ide) {
rendererOptions = {
suppressMarkers : true,
polylineOptions: {
strokeColor: color
}
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var start = ee.toString();
var end = ss.toString();
var waypts = [];
var checkboxArray = document.getElementById('points_'+ide);
for (var i = 0; i < checkboxArray.length; i++) {
waypts.push({
location:checkboxArray[i].value,
stopover:true});
}
var request = {
origin:start,
destination:end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function clearWaypoints() {
origin = null;
destination = null;
waypoints = [];
directionsVisible = false;
}
function reset() {
clearWaypoints();
directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
</script>