Question

下面的代码是我对这个问题的设置，它运作良好

var map;
var markers   = [];
var contentString = '<h1>This is the Title!</h1>';

function initialize() {
  var losAngeles = new google.maps.LatLng(34.0500, -118.2500);
  var mapOptions = {
    zoom: 10,
    center: losAngeles,
    disableDefaultUI: true,
    mapTypeControlOptions: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function addMarker(location) {

  var markerOptions = {
    position: location,
    map: map
  }
  var marker = new google.maps.Marker(markerOptions);
  markers.push(marker);
}

function setAllMap(map) {
  for (var i = 0; i < markers.length;i++) {
    markers[i].setMap(map);
  }
}

function clearMarkers() {
  setAllMap(null);
}

function showMarkers() {
  setAllMap(map);
}

function deleteMarkers() {
  clearMarkers();
  markers = [];
}

function addInfoWindow() {
  infowindow = new google.maps.InfoWindow({
    content: contentString
  });
}



google.maps.event.addDomListener(window, 'load', initialize);



$(document).ready(function() {

  $('#thurs').on('click', function() {
    deleteMarkers();
    // Loads the markers
    addMarker(new google.maps.LatLng(34.0500, -118.2500));

    markers[0].infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    console.log(markers[0].infowindow);
    google.maps.event.addListener(markers[0], 'click', function() {
      this.infowindow.open(map,this);
    });

    setAllMap(map);
  });
})

现在我的问题是为每个标记添加多个标记和相应的信息窗口。我的代码（jQuery）看起来像这样：

for(var i=0;i<locations.length;i++) {
      if(locations[i].start.slice(0, 10) == "2015-04-10") {
        addMarker(new google.maps.LatLng(parseFloat(locations[i].lat), parseFloat(locations[i].lng)));
      }
    }

    console.log(markers);

    for(var i=0;i<markers.length;i++) {
      markers[i].infowindow = new google.maps.InfoWindow({
        content: contentString
      });
    }


    for(var i=0;markers.length;i++) {
      console.log(markers[i].infowindow);
      google.maps.event.addListener(markers[i], 'click', function() {
        markers[i].infowindow.open(map,markers[i]);
      });
    }

当我这样做时，我收到以下错误：

未捕获的TypeError：无法读取属性＆＃39; infowindow＆＃39;未定义的。

Answer 1

问题在于你不应该引用＆＃34; i＆＃34;在你的事件监听器中。单击标记时，我是markers.length。以下事件侦听器将起作用：

    google.maps.event.addListener(markers[i], 'click', function() {
      this.infowindow.open(map, this);
    });

以下是演示代码段的代码段：

＆＃13;

<!DOCTYPE html xmlns:xlink="http://www.w3.org/1999/xlink">>

<head lang="en">
  <meta charset="UTF-8">
  <style>
    html,
    body,
    #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script>
    var map;
    var markers = [];
    var contentString = '<h1>This is the Title!</h1>';

    function initialize() {
      var losAngeles = new google.maps.LatLng(34.0500, -118.2500);
      var mapOptions = {
        zoom: 10,
        center: losAngeles,
        disableDefaultUI: true,
        mapTypeControlOptions: google.maps.MapTypeId.SATELLITE
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      addMarkers();
    }

    function addMarker(location) {
      var markerOptions = {
        position: location,
        map: map
      }
      var marker = new google.maps.Marker(markerOptions);
      markers.push(marker);
    }

    var locations = [{
      start: "2015-04-10",
      lat: 34.0500,
      lng: -118.2500
    }];

    function addMarkers() {
      for (var i = 0; i < locations.length; i++) {
        if (locations[i].start.slice(0, 10) == "2015-04-10") {
          addMarker(new google.maps.LatLng(parseFloat(locations[i].lat), parseFloat(locations[i].lng)));
        }
      }

      for (var i = 0; i < markers.length; i++) {
        markers[i].infowindow = new google.maps.InfoWindow({
          content: contentString
        });
        google.maps.event.addListener(markers[i], 'click', function() {
          this.infowindow.open(map, this);
        });
      }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map-canvas"></div>
</body>

</html>

＆＃13;

如何动态添加infowindows到谷歌地图上的标记？

1 个答案: