Question

我现在非常接近这个，但不能完全得到我正在寻找的结果。这是试图拉出一系列地理定位 - 以及标题和文字。然后将这些分配给在谷歌地图上填充的标记。我的最终目标是获得每个标记和“地图中心”标记之间的行程距离和持续时间（如果您愿意，可以使用中心），并在单击单个标记时将其填充到infoWindow中。

到目前为止，我已经完成了这项工作的各个方面，除了在infoWindow中正确填充距离/持续时间。我可以使用innerHTML成功填充'map-canvas'之外的div。

如果我尝试打印指定的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我为任何丑陋的脚本道歉。我正在学习，并且感谢任何关于使这个脚本更有效的想法！

Answer 1

我可能错了，但是看看你的代码：

<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。假设信息出现在div中确定... 要进入信息窗口，您需要使用：

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

Google Maps API 3路线 - 为infoWindow添加行程持续时间和距离

1 个答案: