Google Maps API 3 Directions - Добавление продолжительности поездки и расстояния до окна информации - PullRequest
Новая
       38

Google Maps API 3 Directions - Добавление продолжительности поездки и расстояния до окна информации

1 голос
/ 22 сентября 2010

Я сейчас так близок к этому, но не могу получить желаемый результат.Это попытка вытащить серию геолокации - вместе с заголовком и текстом.Затем они назначаются маркерам, которые заполняются на карте Google.Моя конечная цель - получить расстояние и продолжительность перемещения между каждым маркером и маркером «карта-центр» (если хотите, концентратором) и заполнить его в информационном окне при нажатии на отдельный маркер.

Пока у меня есть все аспекты этой работы, КРОМЕ ТОГО, как получить расстояние / продолжительность для правильного заполнения в информационном окне.Я могу успешно заполнить 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 }]}

Есть какие-нибудь идеи по заполнению длительности / расстояния в информационном окне?

Помощь оценена!

Спасибо,

Сэм

ps Я прошу прощения за любые уродливые сценарии.Я учусь на ходу и ценю любые мысли по повышению эффективности этого сценария!

1 Ответ

0 голосов
/ 16 ноября 2010

Я могу ошибаться, но, глядя на ваш код: 

<div class="wrapper">
    <div class="container">
        <div class='trav-det' id='distance_road'></div>
        <div class='trav-det' id='duration'></div>
    </div>
</div>

Вы убираете дивов в дом с расстоянием / продолжительностью. предполагая, что информация появляется в divs хорошо ... чтобы получить его в информационном окне, вам нужно использовать: 

 infowindow.setContent(" distance: "+distance+"<br> duration: "+duration+" ")
...