Я сейчас так близко к этому, но не могу получить результат, который я ищу. Это попытка вытащить серию геолокаций - вместе с заголовком и текстом. Затем они назначаются маркерам, которые заполняются на карте google. Моя конечная цель - получить расстояние и продолжительность проезда между каждым маркером и маркером «map-center» (концентратор, если хотите), и заполнить его в окне infoWindow при щелчке по отдельному маркеру.Google Maps API 3 Directions - Добавление продолжительности поездки и расстояния до infoWindow
До сих пор у меня есть все аспекты этой работы, ЗА ИСКЛЮЧЕНИЕМ получения расстояния/продолжительности для правильного заполнения в инфо-окне. Я могу успешно заполнить div вне «map-canvas» с помощью innerHTML.
Если я либо попытаюсь напечатать назначенный var, либо изменить содержимое div внутри infoWindow, функция работает только при первом событии клика. После этого инфо-окно отображается пустым. Вот рабочий сценарий:
<head>
<meta charset="utf-8" />
<title>Towns Hub</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<style>
.wrapper {position:relative;width:500px;height:300px;margin:30px auto;}
#map {width:500px;height:300px;}
.container{position:absolute;bottom:0;left:0;width:100%;z-index:999;}
.trav-det{border:1px solid #000;float:left;padding:7px;font-size:1.5em;background: rgba(255,255,255, .85);}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class='trav-det' id='distance_road'></div>
<div class='trav-det' id='duration'></div>
</div>
<div id="map"></div>
</div>
<script>
var map;
var arrMarkers = [];
var infowindow = new google.maps.InfoWindow();
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function mapInit(){
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
preserveViewport:true
});
var latlng = new google.maps.LatLng(45.18929617,-109.24727440);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions);
directionsDisplay.setMap(map);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(45.18929617,-109.24727440),
map: map,
title: 'Red Lodge, MT',
icon: 'http://mywebsite.com/images/orange-marker.png'
});
$.getJSON("hub.txt", {}, function(data){
$.each(data.places, function(i, item){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.lat, item.lng),
map: map,
title: item.title
});
arrMarkers[i] = marker;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("<p><strong>" + item.title + "</strong><br>"+ item.description +"</p>");
calcRoute(this.getPosition());
infowindow.open(map, this);
});
function calcRoute(drive_end) {
var start = new google.maps.LatLng(45.18929617,-109.24727440);
var end = drive_end;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distance = response.routes[0].legs[0].distance.text;
duration = response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;
document.getElementById("duration").innerHTML = duration;
}
});
}
});
});
}
google.maps.event.addDomListener(window, 'load', mapInit);
</script>
текстовый файл:
{"places": [{ "title": "Cooke City, MT", "description": "TEXT", "lat": 45.02009497, "lng": -109.93234595 }, { "title": "Silver Gate, MT", "description": "TEXY", "lat": 45.00687965, "lng": -109.98979568 }, { "title": "Absarokee, MT", "description": "TEXT", "lat": 45.52004697, "lng": -109.44136186 }, { "title": "Billings, MT", "description": "TEXT", "lat": 45.78333000, "lng": -108.50000000 }, { "title": "Bridger, MT", "description": "TEXT", "lat": 45.28568200, "lng": -108.90821700 }, { "title": "Cody, WY", "description": "TEXT", "lat": 44.52313500, "lng": -109.07561100 }, { "title": "Columbus, MT", "description": "TEXT", "lat": 45.62617100, "lng": -109.25712600 }, { "title": "Gardiner, MT", "description": "TEXT", "lat": 45.03049875, "lng": -110.70471900 }, { "title": "Nye, MT", "description": "TEXT", "lat": 45.43584263, "lng": -109.80859757 }, { "title": "Joliet, MT", "description": "TEXT", "lat": 45.48287830, "lng": -108.97241592 }]}
Любые идеи о наполнении длительность/расстояние в InfoWindow?
Помогите оценить!
Спасибо,
Sam
п.с. Я извиняюсь за любые уродливые сценарии. Я учусь, когда я понимаю и ценю любые мысли о том, как сделать этот скрипт более эффективным!
Просто заметил, что это работает только в Firefox (не Safari или хром). Пока не совсем уверен. – abigwonderful
теперь работает во всех браузерах. В файле JSON был добавлен дополнительный «,», который запустил webkit для цикла. – abigwonderful