7
Googleマップの方向機能の作成/複製に問題があります。私はFrom/Toフィールドを持っていてもうまく動作しますが、複数の宛先を追加しようとするとすぐに動作しません。私は私たちを見てきましたが、これがどのように行われているかを示す良い例のチュートリアルはありません。以下は私がこれまで行ってきたことです。しかし、私はこれが本当にひどく行われたことを確信しています。どんな例も素晴らしいでしょう。GoogleマップAPI - 複数の目的地を追加できない（Googleの案内）
<linkhref=http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src=http://maps.google.com/maps/api/js?sensor=false&key=xxxxx" type="text/javascript"></script>
<script type="text/javascript">
var intTextBox = 0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement() {
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute(
'id', 'strText' + intTextBox);
newTBDiv.innerHTML =
"Text " + intTextBox + ": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>";
contentID.appendChild(newTBDiv);
}
//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement() {
if (intTextBox != 0) {
var contentID = document.getElementById('content');
contentID.removeChild(document.getElementById(
'strText' + intTextBox));
intTextBox = intTextBox - 1;
}
}
var address = '<%= hdnDefault.Value %>'; //Hidden field contains default city London
var rendererOptions = {
draggable:
true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); ;
var directionsService = new google.maps.DirectionsService();
var map;
var mygc = new google.maps.Geocoder();
mygc.geocode({
'address': address },
function(results, status) {
var country1 = results[0].geometry.location.lat();
var country2 = results[0].geometry.location.lng();
var australia = new google.maps.LatLng(country1, country2);
initialize(australia);
}
);
function initialize(australia) {
var myOptions =
{
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: australia
};
map =
new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(
"directionsPanel"));
google.maps.event.addListener(directionsDisplay,
'directions_changed', function() {
computeTotalDistance(directionsDisplay.directions);
});
calcRoute();
}
function calcRoute(fromAddress, toAddress) {/*from and to text boxes*/
var request = {
origin: fromAddress,
destination: toAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request,
function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
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;
}
}
function setDirections(fromAddress, toAddress) {
calcRoute(fromAddress, toAddress);
}
function showLocation() {
geocoder.getLocations(document.forms[0].fromAddress.value,
function(response) {
if (!response || response.Status.code != 200) {
alert(
"Sorry, we were unable to geocode the first address");
}
else {
location1 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };
geocoder.getLocations(document.forms[0].toAddress.value,
function(response) {
if (!response || response.Status.code != 200) {
alert(
"Sorry, we were unable to geocode the second address");
}
else {
location2 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };
gDir.load(
'from: ' + location1.address + ' to: ' + location2.address);
}
});
}
});
}
</script>
<
body onload="initialize()">
<div>
<div id="map_canvas" style="width: 430px; height: 450px; margin-right: 10px;">
</div>
</div>
</div>
/*Contains texboxes and buttons*/
</div>
<div id="directionsPanel" style="text-align: right; width: 900px; height: 100%;">
<p>
Total Distance:
<span id="total"></span>
</p>
</div>
</
body>
ありがとうございました。これは私のために働く！ – Rup