关于javascript：无法读取未定义的属性’open’。 Google Maps infowindow Loop


Cannot read property 'open' of undefined. Google Maps infowindow Loop

我正在使用Google Maps API生成一个带有几个标记的Map，每个标记都有一个infowindow。

所有必要的细节(lattitude，longtitude)都打印在HTML中，我使用JS循环来获取这些值以创建标记和infowindow。

地图生成正常，但是当我点击标记时，我得到"Uncaught TypeError：无法读取未定义的属性'打开'当它应该打开一个infowindow

HTML：

1
2
3
4
5
6
<select>
    <option class="markerobject" data-title="Headquarters" data-address="Suite 707, 2 Huntley St Alexandria NSW 2015" data-latitude="-33.911063" data-longitude="151.193590">Headquarters</option>
    <option class="markerobject" data-title="Melbourne" data-address="Westfield, Carindale Ground level, Kiosk 112 Carindale QLD 4152" data-latitude="-27.505068" data-longitude="153.101718">Melbourne</option>
    <option class="markerobject" data-title="Brisbane" data-address="Myer Centre Brisbane Shop 112 (Next to shaver shop) Brisbane QLD 4000" data-latitude="-27.466099" data-longitude="153.023588">Brisbane</option>
    <option class="markerobject" data-title="Carindale" data-address="Westfield, Carindale Ground level, Kiosk 112 Carindale QLD 4152" data-latitude="-27.505068" data-longitude="153.101718">Carindale</option>
</select>

使用Javascript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function initialize() {

    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = {
        zoom: 4,
        center: myLatlng
    };
    var map = new google.maps.Map(document.getElementById('allstores'), mapOptions);

    var fonekingicon = document.getElementById("mappointer");
    var fonekingiconsrc = fonekingicon.getAttribute("src");

    var markerObjects = document.getElementsByClassName("markerobject");

    var markers = [];
    var infowindows = [];

    for (var i = 0; i < markerObjects.length; ++i) {

        infowindows[i] = new google.maps.InfoWindow({
              content: markerObjects[i].getAttribute("title")
          });

        markers[i] = new google.maps.Marker({
            position: new google.maps.LatLng(
                markerObjects[i].getAttribute("data-latitude")
                ,
                markerObjects[i].getAttribute("data-longitude")        
            ),
            map: map,
            icon: fonekingiconsrc
        });

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

google.maps.event.addDomListener(window, 'load', initialize);
相关讨论

您的infowindows上没有功能关闭，请参阅Google Maps JS API v3 - 简单多标记示例

1
2
3
4
5
google.maps.event.addListener(markers[i], 'click', (function(marker, i) {
  return function() {
    infowindows[i].open(map, markers[i]);
  }
})(markers[i], i));

你的代码中也有一个拼写错误，你的markerObjects没有属性"title"，应该是"data-title"

1
2
3
infowindows[i] = new google.maps.InfoWindow({
      content: markerObjects[i].getAttribute("data-title")
})

工作小提琴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function initialize() {

  var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };
  var map = new google.maps.Map(document.getElementById('allstores'), mapOptions);

  // var fonekingicon = document.getElementById("mappointer");
  //var fonekingiconsrc = fonekingicon.getAttribute("src");

  var markerObjects = document.getElementsByClassName("markerobject");

  var markers = [];
  var infowindows = [];
  var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < markerObjects.length; ++i) {

    infowindows[i] = new google.maps.InfoWindow({
      content: markerObjects[i].getAttribute("data-title")
    });

    markers[i] = new google.maps.Marker({
      position: new google.maps.LatLng(
        markerObjects[i].getAttribute("data-latitude"),
        markerObjects[i].getAttribute("data-longitude")
      ),
      map: map
      // icon: fonekingiconsrc
    });
    google.maps.event.addListener(markers[i], 'click', (function(marker, i) {
      return function() {
        infowindows[i].open(map, markers[i]);
      }
    })(markers[i], i));
    bounds.extend(markers[i].getPosition());

  }
  map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);
1
2
3
4
5
6
7
8
html,
body,
#allstores {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
1
2
3
4
5
6
7
8
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">

<select>
  <option class="markerobject" data-title="Headquarters" data-address="Suite 707, 2 Huntley St Alexandria NSW 2015" data-latitude="-33.911063" data-longitude="151.193590">Headquarters</option>
  <option class="markerobject" data-title="Melbourne" data-address="Westfield, Carindale Ground level, Kiosk 112 Carindale QLD 4152" data-latitude="-27.505068" data-longitude="153.101718">Melbourne</option>
  <option class="markerobject" data-title="Brisbane" data-address="Myer Centre Brisbane Shop 112 (Next to shaver shop) Brisbane QLD 4000" data-latitude="-27.466099" data-longitude="153.023588">Brisbane</option>
  <option class="markerobject" data-title="Carindale" data-address="Westfield, Carindale Ground level, Kiosk 112 Carindale QLD 4152" data-latitude="-27.505068" data-longitude="153.101718">Carindale</option>
</select>