-2
私は多くのマーカーでGoogleマップをレンダリングするページを作っています。私は、クリックしたときにインフォ・ウィンドウが各マーカーに表示されるようにします。このため、各マーカーにクリックイベントリスナーを追加する必要がありました。今では何百ものマーカーがあるので、私はforループを使いました。つまり、何百ものマーカーにイベントリスナーを追加する必要があります。私はイベントリスナーを含む行でエラーmarkers[j] isn't definedを取得Google MAP APIでこの関数クロージャが機能しないのはなぜですか？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#first-tab {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color: green;
}
#second-tab {
position: absolute;
top: 140px;
left: 10px;
width: 100px;
height: 100px;
background-color: red;
}
#third-tab {
position: absolute;
top: 300px;
left: 10px;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<div id="map"></div>
<div id="first-tab"></div>
<div id="second-tab"></div>
<div id="third-tab"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -25.363, lng: 131.044}
});
var contentString = [];
contentString[0] = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
contentString[1] = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">New York</h1>'+
'<div id="bodyContent">'+
'<p><b>New York</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var markers = [];
locations = [{lat: -24.363, lng: 131.044}, {lat: -20.363, lng: 136.044}, {lat: -25.363, lng: 118.044}, {lat: -27.363, lng: 138.044}, {lat: -28.363, lng: 130.044}];
titles = ['rock', 'Alpha', 'beta', 'gamma', 'neta'];
for (var i = 2; i >= 0; i--) {
markers[i] = new google.maps.Marker({
position: locations[i],
map: map,
title: titles[i],
mytype: 1
});
}
for (var k = 4; k >= 3; k--) {
markers[k] = new google.maps.Marker({
position: locations[k],
map: map,
title: titles[k],
mytype: 0
});
}
var infowindow = new google.maps.InfoWindow();
function myclosure(j) {
return function() {
infowindow.setContent(contentString[j]);
infowindow.open(markers[j].get('map'), markers[j]);
}
}
for (var j = 4; j >= 0; j--) {
markers[j].addListener('click', myclosure(j));
}
document.getElementById("second-tab").addEventListener('click', function() {
for (var i = 2; i >= 0; i--) {
markers[i].setMap(null);
}
for (var i = 4; i >= 3; i--) {
markers[i].setMap(map);
}
});
document.getElementById("first-tab").addEventListener('click', function() {
for (var i = 4; i >= 3; i--) {
markers[i].setMap(null);
}
for (var i = 2; i >= 0; i--) {
markers[i].setMap(map);
}
});
document.getElementById("third-tab").addEventListener('click', function() {
for (var i = 4; i >= 0; i--) {
markers[i].setMap(map);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBga3chd-auBMGLGITc3rjact16mozcI4Q&callback=initMap">
</script>
</body>
</html>
：このために私は次のコードを使用していました。ループの代わりに手動で以下を実行する場合：
markers[0].addListener('click', function(){
infowindow.setContent(contentString[0]);
infowindow.open(markers[0].get('map'), markers[0]);
});
マーカー[0]のインフォウィンドウが正常に動作します。したがって、
なぜmyclosure関数は期待どおりに機能しませんか？
編集：それはむしろ、イベントリスナー内で機能myclosureを呼び出して、私はすぐに呼び出された関数内でイベントリスナーを使用する必要があることが示唆されています。しかし、私の方法はなぜ機能しないのですか？私はシンプルなDOM要素についても同じアプローチを試してみました。ここで私が試したコードは次のとおりです。
var cont = document.getElementById("container");
function myclosure(i){
return function(){
alert("test" + i);
}
}
for (var i = 1; i >= 0; i--) {
cont.getElementsByTagName("div")[i].addEventListener("click",myclosure(i));
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
width: 100%;
background-color: #ffff12;
}
.one, .two {
padding: 10px;
}
.one {
background-color: #777;
}
.two {
background-color: #aaa;
}<div id="container">
<div class="one">first</div>
<div class="two">second</div>
</div>私はGoogleマップで使用されるように、私はまったく同じアプローチを使用しています。
なぜこのコードは動作しますが、Googleマップコードではありませんか？
for (j in) { markers[j].addListener('click', myclosure(j)); }実行することができます。
問題の原因となっているコードの分離された部分でフィドルを作成できますか？ – Cheitan
jsfiddleにgoogleのapiスクリプトを追加する方法がわかりません。コード全体をhtmlファイルとして保存して実行することができます。 – user31782
投稿したコード全体をテストする際にエラーが発生することはありません。これを直接試すときに問題がありますか？まったく同じコードを投稿していないかもしれませんが、このコードはChromeとFFでは機能しているようです。 – Cheitan