Google Maps API 3方向 - 旅行期間とInfowindowへの距離を追加する

StackOverflow https://stackoverflow.com/questions/3771299

質問

私は今これにとても近いですが、私が探している結果を完全に得ることができません。これは、タイトルとテキストとともに、一連の地球論を引き出す試みです。これらは、Googleマップに入力されるマーカーに割り当てられます。私の究極の目標は、各マーカーと「マップ中心」マーカー（あなたがそうする場合はハブ）の間の距離と移動期間を取得し、個々のマーカーがクリックされたときにinfowindowに入力することです。

これまでのところ、私はこの作業のあらゆる側面を持っています。 「Map-Canvas」の外側のDivをinnerhtmlで正常に入力できます。

割り当てられたVARを印刷しようとするか、Infowindow内の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の期間/距離に浸透することについてのアイデアはありますか？

感謝してください！

ありがとう、

サム

PS醜いスクリプトをお詫びします。私はこのスクリプトをより効率的にすることについての考えに感謝しているときに学んでいます！

役に立ちましたか？

解決

私は間違っているかもしれませんが、あなたのコードを見ることから：

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

距離/持続時間のDOMでDivを毒性があります。情報がDIVS OKに表示されていると仮定します...それを使用する必要がある情報ウィンドウに入れるには：

 infowindow.setContent(" distance: "+distance+"<br> duration: "+duration+" ")
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top