У меня есть простой тест веб-страницу, которая отображает направления движения:Изменение названия маркеров конечных точек в маршруте Google Maps
Он хорошо работает, но моя проблема заключается в том, что начальные и конечные маркеры показанный маршрут имеет бессмысленные названия «A» и «B».
Я хотел бы использовать ReverseGeocoding для получения заголовков двух конечных точек маршрута.
Так я подготовил следующий код и адрес правильно и принес распечатан с помощью 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» на строки адреса, которые я выбрал.
Ссылка на API JavaScript API Карт Google для DirectionsRenderer не содержит никаких явных крючков для этого (или мне нужно каким-то образом использовать свойство infoWindow здесь? Но почему это не массив, так как у меня есть 2 конечных точки?) .. .
UPDATE: (! спасибо)
Здесь обновляется код после Эммануила внушения
Это работает, но я не доволен, потому что отображаются только оконечные названия, при наведении указателя мыши мышь над маркерами - и я у меня нет мыши в моей целевой среде. Интересно, есть ли какой-нибудь лучший вариант, чтобы адреса конечных точек были постоянно видны на карте?
<!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>
+1 спасибо, это работает. Я переместил вызовы '.geocode' в обратный вызов' .route', сразу после создания маркеров - чтобы предотвратить проблемы с синхронизацией ... Однако я не доволен результатом - поскольку названия конечных точек видны только тогда, когда Я курю над ними (и у меня нет мыши в моей целевой среде). Интересно, есть ли лучший вариант, чтобы заголовки конечных точек были видны на карте. Возможно ли одновременно отображать 2 InfoWindows в Картах Google? –
Конечно, вы можете. Просто создайте 2 объекта infoWindow и заставьте их открыть. Альтернативой может быть использование библиотеки * Marker With Label *: https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries – MrUpsidown