我正在尝试显示两个标记之间的路线，但地图始终只显示爱尔兰的默认位置并且未显示路线
public string DrawMapDirections(string Start,string End,string[] WayPoints)
{
string map = "<script type=\"text/javascript\" src=\"https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false\"></script>" +
"<script>" +
"var rendererOptions = { "+
"draggable: true "+
"}; " +
"var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); " +
" var directionsService = new google.maps.DirectionsService(); " +
" var map; " +
"function initialize() { " +
"var ireland = new google.maps.LatLng(53.085222, -7.558594); " + //Default Ireland
" var mapOptions = { " +
" zoom: 7, " +
" mapTypeId: google.maps.MapTypeId.ROADMAP," +
" center: ireland " +
"}; " +
"map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); " +
"directionsDisplay.setMap(map); " +
"directionsDisplay.setPanel(document.getElementById('directionsPanel'));" +
"google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { " +
"computeTotalDistance(directionsDisplay.directions); "+
"}); "+
//Call calcRoute
" calcRoute();" +
"}" +
"function calcRoute() { " +
"var start = '" + Start.Replace("'", "") + "'; " +
"var end = '" + End.Replace("'", "") + "'; " +
"var waypts = []; ";
foreach (string s in WayPoints)
{
map += "waypts.push({ " +
"location:'" + s.Replace("'","") + "'}); ";
}
map += "var request = { " +
"origin: start, " +
"destination: end, " +
"waypoints: waypts, " +
"optimizeWaypoints: document.getElementById('chkOptimizeWaypoints').checked, " +
"durationInTraffic:document.getElementById('chkDurationInTraffic').checked , " +
"provideRouteAlternatives: document.getElementById('chkProvideRouteAlternatives').checked," +
"avoidHighways: document.getElementById('chkAvoidHighWays').checked," +
"avoidTolls: document.getElementById('chkAvoidTolls').checked, " +
"travelMode: google.maps.DirectionsTravelMode.DRIVING " +
"}; " +
"directionsService.route(request, function(response, status) { " +
"if (status == google.maps.DirectionsStatus.OK) {" +
"directionsDisplay.setDirections(response);" +
"var route = response.routes[0];" +
"}" +
"});" +
" }" +
"function computeTotalDistance(result) { "+
"var total = 0; "+
"var myroute = result.routes[0]; " +
"for (i = 0; i < myroute.legs.length; i++) { "+
"total += myroute.legs[i].distance.value; "+
"} "+
"total = total / 1000; "+
"document.getElementById('total').innerHTML = total + ' km'; "+
"} "+
"</script>";
return map;
}
起点和终点通过此函数传递：
GoogleMap gm = new GoogleMap();
html += gm.DrawMapDirections(start, end, waypoints.ToArray());
所以例如，起点可能是 - Treloggan Ind Est，Newquay，TR7 2SX，Cornwall，United Kingdom。
我没有收到任何错误，所以我不知道它为什么不显示路线
好的，这是地图返回的内容：
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var rendererOptions = { draggable: true };
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var map; function initialize() {
var ireland = new google.maps.LatLng(53.085222, -7.558594);
var mapOptions = { zoom: 7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: ireland };
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionsPanel'));
google.maps.event.addListener(directionsDisplay, 'directions_changed',
function() {
computeTotalDistance(directionsDisplay.directions);
});
calcRoute()
;}
function calcRoute() {
var start = 'Unit 2, Hendy Industrial Estate, Hendy, SWANSEA, SA4 0XP, West Glamorgan, UNITED KINGDOM';
var end = 'Treloggan Ind Est, Newquay, TR7 2SX, Cornwall, UNITED KINGDOM';
var waypts = [];
var request = {
origin: start, destination: end,
waypoints: waypts, optimizeWaypoints: document.getElementById('chkOptimizeWaypoints').checked,
durationInTraffic:document.getElementById('chkDurationInTraffic').checked ,
provideRouteAlternatives: document.getElementById('chkProvideRouteAlternatives').checked,
avoidHighways: document.getElementById('chkAvoidHighWays').checked,avoidTolls: document.getElementById('chkAvoidTolls').checked,
travelMode: google.maps.DirectionsTravelMode.DRIVING };
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK){
directionsDisplay.setDirections(response);var route = response.routes[0];}});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value; }
total = total / 1000;
document.getElementById('total').innerHTML = total + ' km';
}
</script>
答案 0 :(得分：0)
您的代码对我来说是正确的。我用你的代码创建了一个片段，然后我从路径请求中找到了“未找到”的状态。如果我将起点更改为Google地图可以找到的地址，则会显示该路线（位于下面的代码段中）。
如果你知道起点的纬度和经度，你可以使用它，否则你需要有一个方向服务知道的地址。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Direction Service Example</title>
</head>
<body>
<div id="map_canvas" style="width: 600px;height: 600px"></div>
<script>
var map;
var directionsDisplay;
var directionsService;
function initialize() {
var ireland = new google.maps.LatLng(53.085222, -7.558594);
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: ireland
};
directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true
});
directionsService = new google.maps.DirectionsService();
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionsPanel'));
google.maps.event.addListener(directionsDisplay, 'directions_changed',
function() {
computeTotalDistance(directionsDisplay.directions);
});
calcRoute();
}
function calcRoute() {
var start = 'Hendy Industrial Estate, Hendy, Pontarddulais, Swansea, Carmarthenshire SA4 0XP, UK';
var end = 'Treloggan Ind Est, Newquay, TR7 2SX, Cornwall, UNITED KINGDOM';
var waypts = [];
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: false,
durationInTraffic: true,
provideRouteAlternatives: true,
avoidHighways: false,
avoidTolls: false,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById('total').innerHTML = total + ' km';
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
</body>
</html>
答案 1 :(得分：0)
请尝试我的aspx代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Search Route Direction</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<%--Getting User Current Location--%>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
alert("There is Some Problem on your current browser to get Geo Location!");
}
function success(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var city = position.coords.locality;
var LatLng = new google.maps.LatLng(lat, long);
var mapOptions = {
center: LatLng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: "
+ lat + +"<br />Longitude: " + long
});
marker.setMap(map);
var getInfoWindow = new google.maps.InfoWindow({ content: "<b>Your Current Location</b><br/> Latitude:" +
lat + "<br /> Longitude:" + long + ""
});
getInfoWindow.open(map, marker);
}
</script>
<%--Getting Route Direction From User Current Location to Destination--%>
<script type="text/javascript">
function SearchRoute() {
document.getElementById("MyMapLOC").style.display = 'none';
var markers = new Array();
var myLatLng;
//Find the current location of the user.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(p) {
var myLatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
var m = {};
m.title = "Your Current Location";
m.lat = p.coords.latitude;
m.lng = p.coords.longitude;
markers.push(m);
//Find Destination address location.
var address = document.getElementById("txtDestination").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
m = {};
m.title = address;
m.lat = results[0].geometry.location.lat();
m.lng = results[0].geometry.location.lng();
markers.push(m);
var mapOptions = {
center: myLatLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("MapRoute"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.title);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Initialize the Path Array.
var path = new google.maps.MVCArray();
//Getting the Direction Service.
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color.
var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
//Loop and Draw Path Route between the Points on MAP.
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
} else {
alert("Invalid location.");
window.location.href = window.location.href;
}
});
}
}
} else {
alert("Request failed.")
}
});
});
}
else {
alert('Some Problem in getting Geo Location.');
return;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table style="border: solid 15px blue; width: 100%; vertical-align: central;">
<tr>
<td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue;
text-align: center; font-family: Verdana; font-size: 20pt; color: Green;">
Draw Route Between User's Current Location & Destination On Google Map
</td>
</tr>
<tr>
<td style="background-color: skyblue; text-align: center; font-family: Verdana; font-size: 14pt;
color: red;">
<b>Enter Destination:</b>
<input type="text" id="txtDestination" value="" style="width: 200px" />
<input type="button" value="Search Route" onclick="SearchRoute()" />
</td>
</tr>
<tr>
<td>
<div id="MyMapLOC" style="width: 550px; height: 470px">
</div>
<div id="MapRoute" style="width: 500px; height: 500px">
</div>
</td>
</tr>
</form>
</body>
</html>