在谷歌地圖的路線

我有一個簡單的測試網頁，其行車路線顯示不斷變化的終點標記的標題：在谷歌地圖的路線

Mozilla screenshot

它運作良好，但我的問題是，在開始和結束標記顯示的路線具有無意義的標題「A」和「B」。我想用ReverseGeocoding來獲取2個路由端點的標題。

所以我準備了下面的代碼和地址是否正確獲取和使用console.log打印出來：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="http://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 

function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer({}); 
    map = new google.maps.Map(document.getElementById('map-canvas'), null); 
    directionsDisplay.setMap(map); 
    calcRoute(); 
} 

function calcRoute() { 
    var start = new google.maps.LatLng(51.470907, 7.225558); 
    var end = new google.maps.LatLng(52.435293, 10.736883); 

    var startGeocoder = new google.maps.Geocoder(); 
    var endGeocoder = new google.maps.Geocoder(); 

    startGeocoder.geocode({'latLng': start}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK && results[1]) { 
     console.log('START: ' + results[1].formatted_address); 
     //infowindow.setContent(results[1].formatted_address); 
     //infowindow.open(map, marker); 
    } 
    }); 

    endGeocoder.geocode({'latLng': end}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK && results[1]) { 
     console.log('END: ' + results[1].formatted_address); 
     //infowindow.setContent(results[1].formatted_address); 
     //infowindow.open(map, marker); 
    } 
    }); 

    var request = { 
     origin: start, 
     destination: end, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

但是我的問題是，我不知道如何訪問的2個端點標誌路線並將它們的標題從「A」和「B」更改爲我提取的地址字符串。

的Google Maps JavaScript API v3參考沒有列出任何明顯的掛鉤（或者我應該在某處使用infoWindow屬性嗎？但爲什麼它不是一個數組，因爲我有2個端點？。

UPDATE：（！謝謝）

這裏是靈光的建議後更新的代碼

它的工作原理，但我不喜歡它，因爲端點標題只顯示，當用戶懸停把鼠標放在標記上 - 然後我d在我的目標環境中沒有鼠標。我想知道是否有更好的選擇讓端點地址在地圖上永久可見？

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="http://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
var directionsDisplay; 
var map; 

function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true}); 
    map = new google.maps.Map(document.getElementById('map-canvas'), null); 
    directionsDisplay.setMap(map); 
    calcRoute(); 
} 

function calcRoute() { 
    var start = new google.maps.LatLng(51.470907, 7.225558); 
    var end = new google.maps.LatLng(52.435293, 10.736883); 

    var request = { 
    origin: start, 
    destination: end, 
    travelMode: google.maps.TravelMode.DRIVING 
    }; 

    var directionsService = new google.maps.DirectionsService(); 
    directionsService.route(request, function(response, status) { 
    if (status != google.maps.DirectionsStatus.OK) 
     return; 

    directionsDisplay.setDirections(response); 

    // add start and end markers 
    var start = response.mc.origin; 
    var startMarker = new google.maps.Marker({ 
     position: start, 
     map: map 
    }); 

    var startGeocoder = new google.maps.Geocoder(); 
    startGeocoder.geocode({'latLng': start}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK && results[1]) { 
     startMarker.setOptions({title: 'START: ' + results[1].formatted_address}); 
     } 
    }); 

    var end = response.mc.destination; 
    var endMarker = new google.maps.Marker({ 
     position: end, 
     map: map 
    }); 

    var endGeocoder = new google.maps.Geocoder(); 
    endGeocoder.geocode({'latLng': end}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK && results[1]) { 
     endMarker.setOptions({title: 'END: ' + results[1].formatted_address}); 
     } 
    }); 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

來源

2014-10-20 Alexander Farber

我不知道如何訪問這些標記。但我有另一種選擇;你可以壓制這些標記並設置你自己的。然後，你可以讓他們如何你想要的。

<script> 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 
var startMarker; 
var endMarker; 

function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true}); 
    map = new google.maps.Map(document.getElementById('map-canvas'), null); 
    directionsDisplay.setMap(map); 
    calcRoute(); 
} 

function calcRoute() { 
    var start = new google.maps.LatLng(51.470907, 7.225558); 
    var end = new google.maps.LatLng(52.435293, 10.736883); 

    var startGeocoder = new google.maps.Geocoder(); 
    var endGeocoder = new google.maps.Geocoder(); 

    startGeocoder.geocode({'latLng': start}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK && results[1]) { 
     startMarker.setOptions({title: 'START: ' + results[1].formatted_address}); 
    } 
    }); 

    endGeocoder.geocode({'latLng': end}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK && results[1]) { 
     endMarker.setOptions({title: 'END: ' + results[1].formatted_address}); 
    } 
    }); 

    var request = { 
     origin: start, 
     destination: end, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     // add start and end markers 
     startMarker = new google.maps.Marker({ 
     position: response.mc.origin, 
     icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
     map: map 
     }); 
     endMarker = new google.maps.Marker({ 
     position: response.mc.destination, 
     map: map 
     }); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script>

來源

2014-10-20 10:03:44

+1謝謝，這個工程。我已經將'.geocode'調用移到了'.route'回調中，在標記創建之後 - 以防止時間問題......但是我對結果不滿意 - 因爲端點標題只能看到，我將鼠標懸停在他們身上（並且我的目標環境中沒有鼠標）。我想知道是否有更好的選項使端點標題在地圖中可見。 Google地圖可以同時顯示2個InfoWindows嗎？ – 2014-10-20 10:29:48

當然可以。只需創建2個infoWindow對象並強制它們打開。另一種方法是使用* Marker With Label *庫：https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries – MrUpsidown 2014-10-20 12:09:57

在谷歌地圖的路線

回答

相關問題