【发布时间】：2015-09-06 14:15:58
【问题描述】：
我想使用 Google 地图 API 在地图中的每两个点之间绘制一条路线。
【问题讨论】：
标签： google-maps google-maps-api-3 routes google-polyline
【发布时间】：2015-09-06 14:15:58
【问题描述】：
如果您只想根据一组点（坐标）绘制线，您可以使用简单的设置折线，如example，但如果您想获得连接两点的道路路线，您必须深入研究进入服务谷歌地图方向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);
___更新___
您要求提供 HTML。问题是 HTML 是动态的。我将发布初始版本。我在那里有很多其他的 div，但它们对你的情况并不重要。 （我知道这是我的 HTML 的基本内容，但它会根据用户操作动态生成）。无论如何，唯一对您重要的 div 是地图画布。谷歌地图要求这个 div 存在并在那里绘制 MAP 和其他花哨的东西。
<!doctype html>
<html lang="en">
<body>
<div id="wholeBody">
<div id="map-canvas">
</div>
</div>
</body>
</html>
【讨论】：
-
如果这对你有用，你能接受我的回答吗？
-
我的答案是：developers.google.com/maps/documentation/javascript/examples/… 但我想用不同的颜色为每条路径着色，你能帮帮我吗？
-
在上面的解决方案中，可以看到 poly 选项有一个 routeColor 参数。如果您为每个多边形更改它，它们将是不同的颜色。
-
查看this post，不要忘记：谷歌是你的朋友。
-
这是我最好的例子：developers.google.com/maps/documentation/javascript/examples/… 但我想在选择下拉菜单中更改城市更改路径颜色
这是我对这个问题中所有问题的完整回答：
<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>
【讨论】：