使用路线服务 + 路线渲染器时的 Google Maps API V3 重复响应答案

【问题标题】：Google Maps API V3 Duplicated Response when using Directions Service + Directions Renderer使用路线服务 + 路线渲染器时的 Google Maps API V3 重复响应
【发布时间】：2015-08-25 14:23:08
【问题描述】：

我在使用 Google Maps API V3 + Directions Service 和 Renderer 时遇到了一个有趣的问题...基本上，我有一张显示位置（高尔夫球场）的地图和一个供用户输入起点的输入框，然后调用 API 以绘制从原点到高尔夫球场的旅程路径并显示文本方向。

虽然我设法使其大部分工作，但当我获得文本方向时，它们会在屏幕上打印两次，这不是预期的，因为我只希望此信息显示/打印一次...

请在下面找到代码：

HTML：

<div id="mapDirections">
         <div class="cont" style="font-size:0.9em">
                    <h2>Directions from <span class="from"></span></h2> <a href="" target="_blank" class="print">Print</a>
                    <label>From:</label>&nbsp;<input name="from" id="goDir" type="text"><input type="submit" value="Go!" id="getDir">
                    <div class="clearfix"></div>
                    <div id="directions"></div>
         </div>
</div>

Javascript/jQuery :

<script>
function initMap() {
    var myLatLng = {
        lat: <?php echo $row2['latitude']; ?>,
        lng: <?php echo $row2['longitude']; ?>
    };
    var mapCanvas = document.getElementById('mapSpot');
    var mapOptions = {
        center: myLatLng,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var contentString = '<strong><?php echo $row2['name']; ?></strong><br /> Lat: <?php echo $row2['latitude']; ?>/ Long: <?php echo $row2['longitude']; ?>';
    contentString += '<br />';
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions'));
    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 200
    });
    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
    });

    marker.addListener('click', function() {
        infowindow.open(map, marker);
    });

    var onChangeHandler = function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    };

    document.getElementById('getDir').addEventListener('click', onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var myLatLng = {
        lat: <?php echo (float)$row2['latitude']; ?>,
        lng: <?php echo (float)$row2['longitude']; ?>
    };
    var start = document.getElementById('goDir').value;
    var end = myLatLng;
    directionsService.route({
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

$('#myModal').on('shown.bs.modal', function(e) {
    var element = $(e.relatedTarget);
    var data = element.data("lat").split(',')
    initMap();
});
</script>

<script src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap" async defer></script>

该网站还使用 Bootstrap + jQuery，地图将显示在 Bootstrap 模态窗口中。如果有人想看的话，我也可以在这里发送链接或附上一些屏幕截图！

任何人都可以提供任何帮助，我将不胜感激！请不要对我太苛刻，这是我第一次在 StackOverflow 上发帖 :)

谢谢大家的帮助，最好的问候

【问题讨论】：

calculateAndDisplayRoute 多久被调用一次（在其顶部粘贴一个 console.log）？
谢谢邓肯，非常感谢！让我遍历它，也许它更好：1）第一次打开模式：calculateAndDisplayRoute 被调用 0 次 2）第一次“Go！”点击按钮：calculateAndDisplayRoute 被调用 2 次 3) 更多点击 Go！按钮（不关闭模态）：calculateAndDisplayRoute 被调用 2 次 4）模态被关闭，然后再次打开，然后“开始！”按下按钮：calculateAndDisplayRoute 被调用 3 次 5) 模态关闭 2 次，然后再次打开，然后“开始！”按下按钮：calculateAndDisplayRoute 被调用 4 次 - 依此类推..
我只看到一个带有code as posted 的方向面板实例。请提供一个 Minimal, Complete, Tested and Readable example 来证明该问题。
嗨@geocodezip，感谢您与我们联系！我相信这个问题可能与我正在使用的 Bootstrap Modal 有点相关，我之前在没有使用模态的情况下尝试过它并且工作得也很好......有什么办法可以与你分享网站开发链接吗？
您是否在同一页面中定义了多个引导模式，即多个元素可能应用了shown.bs.modal 类？

标签： jquery twitter-bootstrap google-maps google-maps-api-3 twitter-bootstrap-3

【解决方案1】：

回答我自己的问题可能有点愚蠢，但如果他们遇到与地图和引导模式相同的奇怪问题，也可以拯救某人。经过几个小时的环顾并尝试了许多不同的方法来实现最终结果，这里有一个小提琴 - https://jsfiddle.net/b8mk9wj5/1/ - 展示了它是如何工作的::

1) 必须将以下代码位上的 .on 替换为 .one（小提琴上的第 60-62 行）：

       $('#myModal').one('shown.bs.modal', function() {
                        initMap();
        });

2) 将地图、方向显示和方向服务的变量范围更改为全局（小提琴上的第 12、15 和 16 行）：

       map = new google.maps.Map(mapCanvas, mapOptions); //line 12
       directionsDisplay = new google.maps.DirectionsRenderer(); //line 15
       directionsService = new google.maps.DirectionsService(); //line 16

就这么简单。似乎是一种简单/作弊的绕过方法，因为按钮仍然有一些奇怪的行为，但同时似乎正在完成手头的任务。

如果有人找到更优雅的方法，请告诉我！

感谢 @duncan 和 @geocodezip 在这个问题上花费的所有帮助和时间。

【讨论】：