无法通过将信息传递到IIFE来创建Google Map信息窗口

Question

我正在尝试用IIFE创建一个infowindow。我在将信息传递给它时遇到了很多麻烦。

正如您所看到的，我使用searchBox类检索了一个位置数组，该类已被实例化并正确实现，以便正确使用getPlaces（）方法。

地方是一系列对象，我使用这些信息来创建标记和 infowindow 。 标记出现了！然而，我似乎无法将对象放置在IIFE中，将[i]放置。

控制台中甚至没有错误，这就是为什么我迫切需要你的帮助。

我的最终目标是在点击的标记上打开信息窗口，并附上相应的信息。

有人能发现我在这里做错了吗？

    var places = searchBox.getPlaces();  // array of place objects
    var placeMarkers = [];
    var placeInfoWindow = new google.maps.InfoWindow();
    var placeBounds = new google.maps.LatLngBounds();

    if (!places || places === null || places.length === 0) {
        alert("No Places Founds");

    } else {      
        for (var i = 0, l = places.length; i < l; i++) {

            // MARKER
            var loc = places[i].geometry.location;

            var placeMarker = new google.maps.Marker({
                position: loc,
                title: places[i].name,
                animation: google.maps.Animation.DROP,
                icon: places[i].icon
            });

            placeMarkers.push(placeMarker);  // save each marker
            placeMarker.setMap(map);    // display marker immediately

            // extend boundary to include each marker location
            placeBounds.extend(loc);

            //REGISTER MARKER CLICK HANDLER WITH CURRENT places[i] INFO
            placeMarker.addListener("click", (function(placeCopy) {

                return function() {
                    var infoWindowContentStr = '<div>';

                    if (placeCopy.name) {
                        infoWindowContentStr += '<div>' + placeCopy.name + '</div><br>';
                    }

                    if (placeCopy.formatted_address) {
                        infoWindowContentStr += '<div>' + placeCopy.formatted_address + '</div>';
                    }

                    infoWindowContentStr += '</div>';

                    placeInfoWindow.setContent(infoWindowContentStr);
                    placeInfoWindow.open(map, this);
                };
            }), places[i]);
        }
        map.fitBounds(placeBounds);
    }

Answer 1

您的IIFE函数定义中存在拼写错误，它不会执行该函数并在单击发生之前关闭。

相关问题：Google Maps API Places Library SearchBox（用于创建MCVE）

placeMarker.addListener("click", (function(placeCopy) {
   return function() {
     var infoWindowContentStr = '<div>';
       if (placeCopy.name) {
         infoWindowContentStr += '<div>' + placeCopy.name + '</div><br>';
       }
       if (placeCopy.formatted_address) {
         infoWindowContentStr += '<div>' + placeCopy.formatted_address + '</div>';
       }
       infoWindowContentStr += '</div>';
       placeInfoWindow.setContent(infoWindowContentStr);
       placeInfoWindow.open(map, this);
   };
 })(places[i]));  // you had }), places[i]);

proof of concept fiddle

代码段

＆＃13;

＆＃13;

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  });
  var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(41.7033177, -93.0573533),
    new google.maps.LatLng(41, -93)
  );

  map.fitBounds(defaultBounds);

  var input = document.getElementById('target');
  var searchBox = new google.maps.places.SearchBox(input);
  searchBox.setBounds(defaultBounds);
  var markers = [];
  service = new google.maps.places.PlacesService(map);

  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces(); // array of place objects
    var placeMarkers = [];
    var placeInfoWindow = new google.maps.InfoWindow();
    var placeBounds = new google.maps.LatLngBounds();

    if (!places || places === null || places.length === 0) {
      alert("No Places Founds");

    } else {
      for (var i = 0, l = places.length; i < l; i++) {

        // MARKER
        var loc = places[i].geometry.location;

        var placeMarker = new google.maps.Marker({
          position: loc,
          title: places[i].name,
          animation: google.maps.Animation.DROP,
          icon: places[i].icon
        });

        placeMarkers.push(placeMarker); // save each marker
        placeMarker.setMap(map); // display marker immediately

        // extend boundary to include each marker location
        placeBounds.extend(loc);

        //REGISTER MARKER CLICK HANDLER WITH CURRENT places[i] INFO
        placeMarker.addListener("click", (function(placeCopy) {
          return function() {
            var infoWindowContentStr = '<div>';
            if (placeCopy.name) {
              infoWindowContentStr += '<div>' + placeCopy.name + '</div><br>';
            }
            if (placeCopy.formatted_address) {
              infoWindowContentStr += '<div>' + placeCopy.formatted_address + '</div>';
            }
            infoWindowContentStr += '</div>';
            placeInfoWindow.setContent(infoWindowContentStr);
            placeInfoWindow.open(map, this);
          };
        })(places[i]));
      }
      map.fitBounds(placeBounds);
    }
  });
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#search-panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  width: 350px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}

#target {
  width: 345px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="search-panel">
  <input id="target" type="text" placeholder="Search Box">
</div>
<div id="map_canvas"></div>

＆＃13;

＆＃13;

＆＃13;