使用具有多个标记和方向的infoWindows发布Google Maps API v3中的显示变量 [英] Issue with infoWindows with multiple markers and directionsDisplay variables in Google Maps API v3

问题描述

我试图显示Google Maps API v3中两个标记之间的距离和分钟数，并使用这些信息覆盖 directionsService 被解雇，我认为有一个与 calcRoute（）和 infoWindows 有异步的问题。这是一个重现错误的示例代码。



 < html> 
< head> 
< meta charset ='utf-8'> 
< script src =http://maps.google.com/maps/api/js?sensor=truetype =text / javascript>< / script> 
< script> 
 var directionsDisplay = new google.maps.DirectionsRenderer（{'map'：map}）; 
 var directionsService = new google.maps.DirectionsService（）; 
 var map; 
函数initMap（locations）{
函数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]，地点[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]。 leg [0] .duration.text）; 
 infowindow.open（map，marker）; 
} 
}）（marker，i））; 
} 
} 
< / script> 
< / head> 
 < div id =mapcanvasstyle =width：100％; height：100％;> 
< / div> 
< / body> 
  

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

预先感谢...

解决方案

您想在DirectionsService回调函数中打开infowindow，其中数据是可用。

（您可能还想要禁止指示服务中的现有标记）

InfoWindow单击侦听器：

  google.maps.event.addListener（marker，'click'，（function（marker，i）{
返回函数（）{
 calcRoute（locations [i] [1]，locations [i] [2]）; 
 infowindow.open（map，marker）; 
} 
}）（marker，i））; 
  

已更新 calcRoute 函数：

 函数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）; 
} 
}）; 
} 
  

概念证明小提琴

代码段：

  var directionsDisplay = new google.maps.DirectionsRenderer（{map：map，suppressMarkers：true}）; var directionsService = new google.maps.DirectionsService（）; var map; var infowindow = new google.maps.InfoWindow（）;函数initMap（locations）{函数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（地图）; var marker，i; var image = null; （位置[i] [1]，位置[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;宽度：500px; margin：0px; < script src =https：//

I'm trying to display how distance and how minutes are between two markers in Google Maps API v3 and use these information to override the default infoWindow text that appears when the directionsService is fired, I think there is a asyncronous problem with calcRoute() and the infoWindows. This is an example code that reproduces the error.

<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>

Please note that if you click one marker, and then another, the second marker will show the desired result but that information belongs to the first marker... How can I force the order of execution to avoid the async?

Thanks in advance...

解决方案

You want to open the infowindow in the DirectionsService callback function where the data is available.

(you may also want to suppress the existing markers from the directions service)

InfoWindow click listener:

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

Updated calcRoute function:

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

code snippet:

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>

这篇关于使用具有多个标记和方向的infoWindows发布Google Maps API v3中的显示变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！