使用 Google 地图获取路线问题
Posted
技术标签:
【中文标题】使用 Google 地图获取路线问题【英文标题】：Get directions issues with Google maps 【发布时间】：2012-09-28 06:35:48 【问题描述】：我对此很陌生，问题是当您单击重置时方向面板不会消失，以及如何让旅行模式选项起作用。谢谢你 html 代码
<body onload="initialize()">
<div id="container">
<div id="directions">
<table>
<tr>
<td><b>Start: </td></b>
<td>
<select id="start">
<option value="6.517611, 3.385452">Main Gate</option>
</select>
</td>
</tr>
<tr>
<td><b>End: </b></td>
<td>
<select id="end" >
<option value=""><i>choose from list</i></option>
<option value="6.516177, 3.397873">Jaja Hall</option>
<option value="6.515228, 3.398034">Chemical Engineering Dept</option>
<option value="6.515546, 3.399022">Faculty of Sciences</option>
</select>
</td>
</tr>
</table><br />
<td>
<select id="mode" onchange="updateMode()">
<option value="bicycling">Bicycling</option>
<option value="driving">Driving</option>
<option value="walking">Walking</option>
</select>
</td>
<input type="button" value="Get Directions" onclick="calcRoute()" />
<input type="button" value="Reset" onclick="reset()" />
</div>
<div id="directionsPanel"></div></div>
<div id="map"></div>
</body>
javascript代码：
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize()
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(6.514885,3.393742);
var mapOptions =
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
function calcRoute()
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var mode;
switch (document.getElementById("mode").value)
case "bicycling":
mode = google.maps.DirectionsTravelMode.BICYCLING;
break;
case "driving":
mode = google.maps.DirectionsTravelMode.DRIVING;
break;
case "walking":
mode = google.maps.DirectionsTravelMode.WALKING;
break;
var request =
origin:start,
destination:end,
travelMode: mode
;
directionsService.route(request, function(response, status)
if (status == google.maps.DirectionsStatus.OK)
directionsDisplay.setDirections(response);
);
function updateMode()
if (directionsVisible)
calcRoute();
function clearMarkers()
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(6.514885,3.393742);
var mapOptions =
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
map = new google.maps.Map(document.getElementById('map'), mapOptions);
end_loc = document.getElementById('end')
end_loc.value = ""
function reset()
clearMarkers();
directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
【问题讨论】：
您遇到的错误是什么。 我没有设置任何错误警报，但无论如何，我终于让模式选项工作了，问题是当您单击重置按钮时，一切都会重置，但分步说明面板仍然存在仍然，它应该消失.. 尝试在 reset() 中注释 clearMakers() 函数。 【参考方案1】：@user1704833，重置按钮清除方向面板。这就是你要找的吗？
<!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 Simple</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize()
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(6.514885,3.393742);
var mapOptions =
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
function calcRoute()
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var mode;
switch ( document.getElementById("mode").value)
case 'bicycling' :
mode = google.maps.DirectionsTravelMode.BICYCLING;
break;
case 'driving':
mode = google.maps.DirectionsTravelMode.DRIVING;
break;
case 'walking':
mode = google.maps.DirectionsTravelMode.WALKING;
break;
var request =
origin:start,
destination:end,
travelMode: mode
;
directionsService.route(request, function(response, status)
if (status == google.maps.DirectionsStatus.OK)
directionsDisplay.setDirections(response);
);
function updateMode()
calcRoute();
function clearMarkers()
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(6.517611, 3.385452);
var mapOptions =
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
document.getElementById('end').value = "";
function reset()
//clearMarkers();
directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
</script>
</head>
<body onload="initialize()">
<div>
<b>Start: </b>
<select id="start">
<option value="6.517611, 3.385452">Main Gate</option>
</select>
<b>End: </b>
<select id="end" >
<option value="6.516177, 3.397873">Jaja Hall</option>
<option value="6.515228, 3.398034">Chemical Engineering Dept</option>
<option value="6.515546, 3.399022">Faculty of Sciences</option>
</select>
<select id="mode" onchange="updateMode()">
<option value="bicycling">Bicycling</option>
<option value="driving">Driving</option>
<option value="walking">Walking</option>
</select>
<input type="button" value="Update" onclick="updateMode()" />
<input type="button" value="Reset" onclick="reset()" />
</div>
<div id="directionsPanel" style="width:300px; position:absolute; margin-left:550px; top:30px;">Direction panel</div>
<div id="map_canvas" style="width:500px; height:500px; top:30px;"></div>
</body>
</html>
【讨论】：
以上是关于使用 Google 地图获取路线问题的主要内容，如果未能解决你的问题，请参考以下文章