在infowindow gmaps v3中添加更多信息？

Question

在我的地图上我拥有几个标记和每个标记一个infowindow，我在向我的infowindow添加更多组件时遇到问题，我有一个数组和每个标记的每个位置信息，请参阅代码，变量数据是addListener方法中没有初始化每个数组的位置值。

function initialize() {
    var latlng = new google.maps.LatLng(latitudes, longitudes);

    var options = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    var geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById("mapa"), options);          

    var pontos = [];
    if (coord.length > 1) {
        for (var i = 0; i < coord.length; i++) {
            var location = coord[i].split(",");
            var dados = veic[i]; // // Veic [] is an array that at each position, I have some information.

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(location[0], location[1]),
                map: map
            })

            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent("<b>Dados: </b>Carregando...");
                infoWindow.open(map, this);
                google.maps.event.addListener(infoWindow, 'domready', function () {
                    geocoder.geocode({ 'latLng': infoWindow.position }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {

                            infoWindow.setContent("<b>Endereço: </b>" + results[0].formatted_address
                                +"</br> Veículo: "+ dados)} // Here in this passage, I can not get information from this variable.

                    });
                });
            });
        }

    }
}

Answer 1

编写的代码有两个问题：

1. 您需要使用函数闭包（或其他机制）将i与infowindow关联。
2. 您需要对domready事件使用addListenerOnce。

google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function () {
        var dados = veic[i]; // // Veic [] is an array that at each position, I have some information.

        infoWindow.setContent("<b>Dados: </b>Carregando...");
        infoWindow.open(map, this);
        google.maps.event.addListenerOnce(infoWindow, 'domready', function () {
            geocoder.geocode({
                'latLng': infoWindow.position
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                      infoWindow.setContent("<b>Endereço: </b>" + results[0].formatted_address + "</br> Veículo: " + dados);
                } // Here in this passage, I can not get information from this variable.

            });
        });
    };
})(marker, i));

working fiddle

代码段：

＆＃13;
＆＃13;
function initialize() {
  var latlng = new google.maps.LatLng(45, -85);
  var coord = ["45,-85", "45.001,-85.01"];
  var veic = ["some information", "other information"];

  var options = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var infoWindow = new google.maps.InfoWindow();
  var geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById("mapa"), options);

  var pontos = [];
  if (coord.length > 1) {
    for (var i = 0; i < coord.length; i++) {
      var location = coord[i].split(",");

      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(location[0], location[1]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          var dados = veic[i]; // // Veic [] is an array that at each position, I have some information.

          infoWindow.setContent("<b>Dados: </b>Carregando...");
          infoWindow.open(map, this);
          google.maps.event.addListenerOnce(infoWindow, 'domready', function() {
            geocoder.geocode({
              'latLng': infoWindow.position
            }, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {

                infoWindow.setContent("<b>Endereço: </b>" + results[0].formatted_address + "</br> Veículo: " + dados);
              } // Here in this passage, I can not get information from this variable.

            });
          });
        };
      })(marker, i));
    }
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
＆＃13;
html,
body,
#mapa {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
＆＃13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div style="" id="mapa"></div>
＆＃13;
＆＃13;
＆＃13;