谷歌地图apiv3,每个标记具有相同的点击功能

问题描述:

我似乎遇到了一个问题,我看到很多信息框的实现,但似乎无法弄清楚如何将另一段代码插入标记。我对JavaScript很没有经验,所以我似乎无法弄清楚。谷歌地图apiv3,每个标记具有相同的点击功能

当我去映射它显示了所有的标志物,但只有选择一段代码是最后的阵列中,

代码:

function updateMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: locationarray[0] 
    }); 
    var markernumber = new Array(); 
    for (var i = 0; i < 99; i++) { 
    markernumber[i] = new google.maps.Marker({ 
     position: locationarray[i], 
     map: map 
    }); 
    console.log('in loop:' + i); 
    google.maps.event.addListener(markernumber[i], 'click', function() { 
     console.log('in click:' + i); 
     openInNewTab(contentString[i]); 
    }); 
    } 
    document.getElementById('loader').style = "opacity: 0;"; 
} 

contentstring [i]的工作正常,所以它没有这个功能。

+1

'谷歌地图apiv3给每个标记相同的点击function' - 不,你正在做的...'i'内的事件处理程序将是100,每标记点击。想关闭 –

+1

[Google Maps JS API v3 - 简单多标记示例]的可能重复(https://*.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) – geocodezip

尝试类似的东西:

var markernumber = new Array(); 
    for (var i = 0; i < 4; i++) { 
     markernumber[i] = new google.maps.Marker({ 
      position: position[i], 
      map: map 
     }); 
     console.log('in loop:' + i); 
     (function (i, content, marker) { 

      google.maps.event.addListener(marker, 'click', function (e) { 
       console.log('in click:' + i); 
       //console.log(e); 
      }); 

     })(i, contentString[i], markernumber[i]); 
    } 

你已经得到了一个闭合的错误。这意味着当听者将被执行时,i值已经改变(进入for)并且它传递到99.

按顺序解释。当你打电话给i,或者你想要的变量时,系统会尝试用这个名字找到最后一个值。所以,如果值发生变化,结果将是变量的最后一次“更新”。

在这里,当你尝试读取i你曾经“更新” ifor所以最后值将是99

如果你想在你的听众阅读的i的价值,你必须创建一个IIFE并传入参数i,contentStringmarkernumber的实际值。

如果你想了解关于闭包的更多细节或者关于IIFE的here,请参考documentation(你必须在文档中找到一点,但是有一段文字,它是最好的,可以找到的)。

告诉我,如果你有一些问题

+0

不好意思,我的先例文章包含错误,但现在通常没问题。 –