带有多个标记和方向的 infoWindows 问题在 Google Maps API v3 中显示变量答案

【问题标题】：Issue with infoWindows with multiple markers and directionsDisplay variables in Google Maps API v3带有多个标记和方向的 infoWindows 问题在 Google Maps API v3 中显示变量
【发布时间】：2015-11-10 16:21:54
【问题描述】：

我正在尝试显示 Google Maps API v3 中两个标记之间的距离和分钟数，并使用这些信息覆盖在触发 directionsService 时出现的默认 infoWindow 文本，我认为存在异步问题与calcRoute() 和infoWindows。这是重现错误的示例代码。

<html>
<head>
    <meta charset='utf-8'>
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    <script>
        var directionsDisplay = new google.maps.DirectionsRenderer({ 'map': map }); 
        var directionsService = new google.maps.DirectionsService();
        var map;
        function initMap(locations){
            function calcRoute(latdest, lngdest) {
                var start = new google.maps.LatLng(-23.571064, -46.645424);
                var end = new google.maps.LatLng(latdest, lngdest)
                var request = {origin:start,destination:end,travelMode: google.maps.TravelMode.DRIVING};
                directionsService.route(request, function(result, status){
                    if (status == google.maps.DirectionsStatus.OK){
                        directionsDisplay.setDirections(result);
                    }
                });
            }
            map = new google.maps.Map(document.getElementById('mapcanvas'), {zoom: 10,center: new google.maps.LatLng(-23.571064, -46.645424),mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            directionsDisplay.setMap(map);

            var infowindow = new google.maps.InfoWindow();

            var marker, i;
            var image = null;
            for (i = 0; i < locations.length; i++) {
              marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
              });

              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    calcRoute(locations[i][1], locations[i][2]);
                    infowindow.setContent(directionsDisplay.directions.routes[0].legs[0].distance.text+" - "+directionsDisplay.directions.routes[0].legs[0].duration.text);
                    infowindow.open(map, marker);
                }
              })(marker, i));
            }
        }
    </script>
</head>
<body onload='initMap([["Vila Noemia", -23.670237, -46.467286],["Osasco", -23.535465, -46.794234],["Guarulhos", -23.458911, -46.526912]]);'>
    <div id="mapcanvas" style="width:100%;height:100%;">
    </div>
</body>

请注意，如果您单击一个标记，然后单击另一个，第二个标记将显示所需的结果，但该信息属于第一个标记...如何强制执行顺序以避免异步？

提前谢谢...

【问题讨论】：

我曾尝试使用callbacks、$.deferreds 和$.when，但这些都对我不起作用，尽管我不能 100% 确定我实施得很好......跨度>

标签： javascript google-maps google-maps-api-3 google-maps-markers infowindow

【解决方案1】：

您想在数据可用的 DirectionsService 回调函数中打开信息窗口。

（您可能还想从路线服务中隐藏现有标记）

InfoWindow 点击监听器：

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            calcRoute(locations[i][1], locations[i][2]);
            infowindow.open(map, marker);
        }
    })(marker, i));

更新calcRoute函数：

function calcRoute(latdest, lngdest) {
    var start = new google.maps.LatLng(-23.571064, -46.645424);
    var end = new google.maps.LatLng(latdest, lngdest)
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
            infowindow.setContent(directionsDisplay.directions.routes[0].legs[0].distance.text + " - " + directionsDisplay.directions.routes[0].legs[0].duration.text);
        }
    });
}

proof of concept fiddle

代码 sn-p：

var directionsDisplay = new google.maps.DirectionsRenderer({
  map: map,
  suppressMarkers: true
});
var directionsService = new google.maps.DirectionsService();
var map;
var infowindow = new google.maps.InfoWindow();

function initMap(locations) {
  function calcRoute(latdest, lngdest) {
    var start = new google.maps.LatLng(-23.571064, -46.645424);
    var end = new google.maps.LatLng(latdest, lngdest)
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
        infowindow.setContent(directionsDisplay.directions.routes[0].legs[0].distance.text + " - " + directionsDisplay.directions.routes[0].legs[0].duration.text);
      }
    });
  }
  map = new google.maps.Map(document.getElementById('mapcanvas'), {
    zoom: 10,
    center: new google.maps.LatLng(-23.571064, -46.645424),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  directionsDisplay.setMap(map);

  var marker, i;
  var image = null;
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        calcRoute(locations[i][1], locations[i][2]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}
google.maps.event.addDomListener(window, 'load', function() {
  initMap([
    ["Vila Noemia", -23.670237, -46.467286],
    ["Osasco", -23.535465, -46.794234],
    ["Guarulhos", -23.458911, -46.526912]
  ]);
});

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapcanvas" style="width:100%;height:100%;"></div>

【讨论】：

太棒了，有可能不删除点A（起点）吗？这是一个小例子，但在我的真实代码中，start 是数组位置的第一个元素：var start = new google.maps.LatLng(locations[0][1], locations[0][2]); 所以我不想删除它。
我不想删除，但是hide 标记（开始和结束），当用户单击另一个标记时取消隐藏隐藏的标记，这可能吗？
您不必使用suppressMarkers，但如果您使用它，它会删除所有标记（但您有自己的标记，没有理由不能更改它们）。脚本中不再需要 sensor 参数，如果它在您自己的网站上，建议（但不是必需）您的密钥，以便您跟踪使用情况。
您的 cmets 可能最好在新问题中捕获。
你说得对，我会整理并提出一个新问题，谢谢你的提示！