[英]Cannot read property 'open' of undefined. Google Maps infowindow Loop
我正在使用Google Maps API生成帶有幾個標記的地圖,每個標記都有一個信息窗口。
所有必要的細節(緯度,經度)都打印在HTML中,我使用JS循環來獲取這些值,以創建標記和信息窗口。
該地圖生成正常,但是當我應該打開一個信息窗口時,當我單擊一個標記時,會顯示“ Uncaught TypeError:無法讀取未定義的屬性'open'”
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);
您的信息窗口上沒有函數關閉功能,請參見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沒有屬性“ title”,應為“ data-title”
infowindows[i] = new 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") }); 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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.