Question

我正在尝试将我的标记放在谷歌地图上，并为每个标记添加一个InfoWindow。我点击其中一个标记后，无法在此行上读取未定义的属性“名称”：

markers[i].name.open(map, marker);

这是完整的脚本：

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    // zoom in on current location if available (not done yet...)
    center: new google.maps.LatLng(5,5)
  });

  var markers = [
    // put all markers in a markers array
    @foreach ($markers as $marker)
      new google.maps.Marker({
        position: { lat: {{$marker->x}}, lng: {{$marker->y}} },
        // infowindow for each marker with its name
        name: new google.maps.InfoWindow({
          content: "{{$marker->name}}"
        })
      }), 
    @endforeach
  ];

  for (var i = 0; i < markers.length; i++) { 
    // add eventlistener for the infowindow we added earlier
    google.maps.event.addListener(markers[i], 'click', function() {
      markers[i].name.open(map, marker);
    });
    // add marker to map
    markers[i].setMap(map);
  }
}

我正在使用带有Blade模板引擎的Laravel 5.1。

Answer 1

试试这个吗？

 for (var i = 0; i < markers.length; i++) {
            // add eventlistener for the infowindow we added earlier
            (function(i) {
                google.maps.event.addListener(markers[i], 'click', function() {
                    //console.log(markers[i])
                    markers[i].name.open(map, markers[i]);
                });
                // add marker to map
                markers[i].setMap(map);
            })(i);

  }

Answer 2

这是有效的（点击监听器中的this是指被点击的google.maps.Marker：

for (var i = 0; i < markers.length; i++) { 
  // add eventlistener for the infowindow we added earlier
  google.maps.event.addListener(markers[i], 'click', function() {
    this.name.open(map, this);
  });
  // add marker to map
  markers[i].setMap(map);
}

proof of concept fiddle

代码段

＆＃13;

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    // zoom in on current location if available (not done yet...)
    center: new google.maps.LatLng(5, 5)
  });

  var markers = [
    // put all markers in a markers array
    // @foreach ($markers as $marker)
    // New York, NY, USA (40.7127837, -74.00594130000002)
    new google.maps.Marker({
      position: {
        lat: 40.7127837,
        lng: -74.0059413
      },
      // infowindow for each marker with its name
      name: new google.maps.InfoWindow({
        content: "New York, NY, USA"
      })
    }),
    // Newark, NJ, USA (40.735657, -74.1723667)
    new google.maps.Marker({
      position: {
        lat: 40.735657,
        lng: -74.1723667
      },
      // infowindow for each marker with its name
      name: new google.maps.InfoWindow({
        content: "Newark, NJ, USA"
      })
    }),
    //  Baltimore, MD, USA (39.2903848, -76.61218930000001)
    new google.maps.Marker({
      position: {
        lat: 39.2903848,
        lng: -76.6121893
      },
      // infowindow for each marker with its name
      name: new google.maps.InfoWindow({
        content: "Baltimore, MD, USA"
      })
    }),
    //    @endforeach
  ];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    // add eventlistener for the infowindow we added earlier
    google.maps.event.addListener(markers[i], 'click', function() {
      this.name.open(map, this);
    });
    // add marker to map
    markers[i].setMap(map);
    bounds.extend(markers[i].getPosition());
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

将eventlistener添加到javascript数组

2 个答案: