无法读取未定义的属性'open'。 Google地图infowindow循环 [英] Cannot read property 'open' of undefined. Google Maps infowindow Loop

问题描述

我使用Google Maps API来生成带有几个标记的地图，每个标记都有一个infowindow。

所有必要的细节（地形，经度）在HTML中打印，我使用JS循环为了获得这些值，以创建标记和infowindow。

地图生成很好，但当我点击我得到的标记Uncaught TypeError：当它打开一个infowindow时，无法读取未定义的属性'open'

HTML：

 < select> 
  < option class =markerobjectdata-title =Brisbanedata-address =Myer Centre Brisbane Shop 112（位于剃须刀店旁边）Brisbane QLD 4000data-latitude = -  27.466099data-longitude = 153.023588 >布里斯班< /选项> 
 < / select> 
  

Javascript：

  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 - 简单多标记示例

  google.maps.event.addListener（markers [i]，'click'，（function（marker，i）{ 
 return function（）{
 infowindows [i] .open（map，markers [i]）; 
} 
}）（markers [i]，i））; 
  

您的代码中还有一个拼写错误，您的markerObjects没有属性标题成为数据标题

  infowindows [i] =新google.maps.InfoWindow（{
 content：markerObjects [i] .getAttribute（data-title）
}）
  

工作小提琴

  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）}）; marker [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（标记[I] .getPosition（））; } map.fitBounds（bounds）;} google.maps.event.addDomListener（window，'load'，initialize）;  

  html，body，＃allstores {height：500px;宽度：500px; margin：0px; < script src =https：//   

I'm using Google Maps API to generate a Map with a few markers, each one has a infowindow.

All of the neccessary details (lattitude, longtitude) are printed in the HTML, I used JS loop in order to get those values in order to create the markers and the infowindow.

The map generates fine but when I click on a markers I get "Uncaught TypeError: Cannot read property 'open' of undefined" when it's supposed to open an infowindow

HTML:

<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:

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);

解决方案

You don't have function closure on your infowindows, see Google Maps JS API v3 - Simple Multiple Marker Example

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

You also have a typo in your code, there is no attribute "title" of your markerObjects, should be "data-title"

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

working fiddle

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);

html,
body,
#allstores {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="allstores" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<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>

这篇关于无法读取未定义的属性'open'。 Google地图infowindow循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！