谷歌地图无法读取未定义的属性“打开” [英] google map Cannot read property 'open' of undefined
问题描述
$（document）.on（click，#searchRankingLocation，function（）{map = new google.maps。 Map（document.getElementById（'map'），{center：{lat：37.402040，lng：127.107296}，// usepace zoom：7}）; for（var i = 0; i< locationList.length; i ++）{ marker [i] = new google.maps.Marker（{map：map，draggable：true，animation：google.maps.Animation.DROP，position：locationList [i]，title：rankingInfoList [i] .name}）; infoList [i] ='此区域将改变。'windowNames [i] = new google.maps.InfoWindow（{content：infoList [i]}）; google.maps.event.addListener（markers [i]，'click'， function（）{windowNames [i] .open（map，markers [i]）;}）; }}）;
< script src =https： //ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js\"></script>
这是我的来源。
我无法向你展示Windows，我试图找到很多解决方案，但他们并没有帮助我！
var i 本质上使得i变量的作用域在循环之外，因此在发生click事件时，我会 locationList.length - 因此，显然 windowNames [i] 将会是未定义的 使用一个函数（我在这段代码中称它为 doInfo ）来克服这个问题的三种方法 / p>
$（document）.on（click，#searchRankingLocation，function（）{
map = new google.maps.Map（document.getElementById（'map'），{
center：{
lat：37.402040，
lng：127.107296
}，// usepace
zoom：7
））;
函数doInfo（marker，windowName）{
google.maps.event.addListener（marker，'click'，function（）{
windowName 。打开（地图，标记）;
}）;
for（var i = 0; i< locationList.length; i ++）{
markers [i] = new google.maps.Marker（{
map：map ，
draggable：true，
animation：google.maps.Animation.DROP，
position：locationList [i]，
title：rankingInfoList [i] .name
}）;
infoList [i] ='这个区域会改变'
windowNames [i] = new google.maps.InfoWindow（{
content：infoList [i]
}）;
doInfo（markers [i]，windowNames [i]）;
}
}）;
在这种情况下，函数接收当前的marker / windowName，所以<$ c $使用IIFE（立即调用的函数表达式）
pre $ $（document）.on（click，#searchRankingLocation，function（）{
map = new google.maps.Map（document.getElementById（'map '），{
center：{
lat：37.402040，
lng：127.107296
}，// usepace
zoom：7
}）;
for（var i = 0; i< locationList.length; i ++）{
markers [i] = new google.maps.Marker（{
map：map，
draggable ：true，
animation：google.maps.Animation.DROP，
position：locationList [i]，
title：rankingInfoList [i] .name
}）;
infoList [i] ='这个区域会改变。'
windowNames [i] = new google.maps.InfoWindow（{
content：infoList [i]
}）;
（function（x）{// IIFE
google.maps.event.addListener（markers [x]，'click'，function（）{
windowNames [x] .open（地图，标记[x]）;
}）;
}）（i）; //传入i的当前值，在IIFE
}
}}的主体中用作x;
这与第一种情况非常相似，只是该函数是inline，因此可以考虑某些人更易读 - x 是每次迭代时的<捕获>值 i - 或者您也可以
（function（marker，windowName）{// IIFE
google.maps.event.addListener（marker，'点击'，function（）{
windowName.open（map，marker）;
}）;
}）（markers [i]，windowNames [i]）;
因此，您可以看到这与第一个答案几乎完全相同
使用ES2015 让 - 这只会在现代浏览器中正常运行（因此，忘记Internet Explorer）
$（document）.on（click，#searchRankingLocation，function（）{
map =新的google.maps.Map（document.getElementById（'map'），{
center：{
lat：37.402040，
lng：127.107296
}，// usepace
$ b}）;
for（let i = 0; i< locationList.length; i ++）{
markers [i] = new google.maps.Marker（{
map：map，
draggable：true，
animation：google.maps.Animation.DROP，
position：locationList [i]，
title：rankingInfoList [i ] .name
}）;
infoList [i] ='此区域将改变。'
windowNames [i] = new google.maps.InfoWindow（{
content：infoList [i]
}）;
google.maps.event.addListener（markers [i]，'click'，function（）{
windowNames [i] .open（map，markers [i]）;
}） ;
}
}）;
让我意味着每次迭代循环中， i 的值在该迭代中被捕获
，这也可以这样来完成：
// ...
let marker = markers [i];
let windowName = windowNames [i];
google.maps.event.addListener（marker，'click'，function（）{
windowName.open（map，marker）;
}）;
// ...
因此，您可以看到所有方法在最终结果中都是相同的当它归结于它时
$(document).on("click", "#searchRankingLocation", function() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 37.402040,
lng: 127.107296
}, //usepace
zoom: 7
});
for (var i = 0; i < locationList.length; i++) {
markers[i] = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: locationList[i],
title: rankingInfoList[i].name
});
infoList[i] = 'this area will changed.'
windowNames[i] = new google.maps.InfoWindow({
content: infoList[i]
});
google.maps.event.addListener(markers[i], 'click', function() {
windowNames[i].open(map, markers[i]);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
This is my source.
I can't show you windows, I tried to find a lot of solution but they did not help me!
In your original code, the var i essentially makes the i variables scope outside of the loop, therefore by the time the click event happens, i would be locationList.length - so, obviously windowNames[i] would be undefined
3 ways to overcome this
using a function (I called it doInfo in this code )
$(document).on("click", "#searchRankingLocation", function() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 37.402040,
lng: 127.107296
}, //usepace
zoom: 7
});
function doInfo(marker, windowName) {
google.maps.event.addListener(marker, 'click', function() {
windowName.open(map, marker);
});
}
for (var i = 0; i < locationList.length; i++) {
markers[i] = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: locationList[i],
title: rankingInfoList[i].name
});
infoList[i] = 'this area will changed.'
windowNames[i] = new google.maps.InfoWindow({
content: infoList[i]
});
doInfo(markers[i], windowNames[i]);
}
});
in this case, the function receives the current marker/windowName, so the value of i is now irrelevant
using an IIFE (Immediately invoked function expression)
$(document).on("click", "#searchRankingLocation", function() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 37.402040,
lng: 127.107296
}, //usepace
zoom: 7
});
for (var i = 0; i < locationList.length; i++) {
markers[i] = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: locationList[i],
title: rankingInfoList[i].name
});
infoList[i] = 'this area will changed.'
windowNames[i] = new google.maps.InfoWindow({
content: infoList[i]
});
(function(x) { // the IIFE
google.maps.event.addListener(markers[x], 'click', function() {
windowNames[x].open(map, markers[x]);
});
})(i); //pass in the current value of i, used as x in the body of the IIFE
}
});
This is very similar to the first case, just that the function is "inline" so could be considered more readable by some - x is the "captured" value of i for each iteration - alternatively you could also do
(function(marker, windowName) { // the IIFE
google.maps.event.addListener(marker, 'click', function() {
windowName.open(map, marker);
});
})(markers[i], windowNames[i]);
So, you can see how this is almost identical to the first answer
Using ES2015 let - this will only work (without transpiling) in modern browsers (so, forget internet explorer)
$(document).on("click", "#searchRankingLocation", function() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 37.402040,
lng: 127.107296
}, //usepace
zoom: 7
});
for (let i = 0; i < locationList.length; i++) {
markers[i] = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: locationList[i],
title: rankingInfoList[i].name
});
infoList[i] = 'this area will changed.'
windowNames[i] = new google.maps.InfoWindow({
content: infoList[i]
});
google.maps.event.addListener(markers[i], 'click', function() {
windowNames[i].open(map, markers[i]);
});
}
});
let i means that each iteration of the loop, the value of i is "captured" for that iteration
again, this can also be done as:
// ...
let marker = markers[i];
let windowName = windowNames[i];
google.maps.event.addListener(marker, 'click', function() {
windowName.open(map, marker);
});
// ...
So, you can see all methods are identical in end result when it comes down to it
这篇关于谷歌地图无法读取未定义的属性“打开”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
