为Google地图标记JavaScript添加onclick监听器 [英] Add onclick listener to Google Maps Markers JavaScript

问题描述

我写了这段代码：

 < script type =text / javascript> 
 var address = JSON.parse（'<？php echo $ jsonLocations？>'）; 
 console.log（address.locations [0]）; 
 var latitude ='1'; 
 var longitude ='1'; 
 
函数initMap（）{
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：12，
 center ：new google.maps.LatLng（latitude，longitude）
}）; 
 for（var i = 0; i< address.locations.length; i ++）{
 
 new google.maps.Marker（{
 position：new google.maps。 LatLng（address.locations [i] ['lat']，address.locations [i] ['long']），
 map：map 
}）。addListener（'click'，function（） {
 new google.maps.InfoWindow（{
 content：'< div id =content>'+ 
'< div id =siteNotice>'+ 
'< / div>'+ 
'< h5> + i +'< h5>'+ 
'< div id =bodyContent>'+ 
'< / div>'+ 
'< / div>'
}）。open（map，this）; 
}）
} 
} 
 
< / script> 
  

我试图显示 i onClick的标记。因此，对于第一个制造商，我应该是0和第二个1.但不知何故 i 总是相同的值

解决方案

这是一个经典的关闭问题。
使用 i 变量的函数是一个异步回调函数。

第一件事是什么发生的是，所有的标记都将被创建。因此，在循环结束时 i 将会是 address.locations.length 。
异步回调现在引用了这个确切的变量。

有一些可能的修正：

如果您能够使用ES6 JavaScript特性，请使用let语句：

  for（let i = 0; i< address .locations.length; i ++）{
 [...] 
} 
  

第二个是用这个确切绑定创建一个闭包：

  for（var i = 0; i< address。 （i）
 $ {
 $ {
 
 
 
 
 
 
 $ > 

最后一个选项是使用 Function.bind 方法。

  for（var i = 0; i< address.locations.length; i ++）{
 
 google google。 maps.Marker（{
 position：new google.maps.LatLng（address.locations [i] ['lat']，address.locations [i] ['long']），
 map：map 
}）。addListener（'click'，（function（i）{
 new google.maps.InfoW indow（{
 content：'< div id =content>'+ 
'< div id =siteNotice>'+ 
'< / div>' + 
'< h5>'+ i +'< / h5>'+ 
'< div id =bodyContent>'+ 
'< / div>' + 
'< / div>'
}）。open（map，this）; 
））。bind（this，i））
} 
  

我希望这种方法之一将为你工作。

I wrote this code:

<script type="text/javascript">
    var address = JSON.parse('<?php echo $jsonLocations ?>');
    console.log(address.locations[0]);
    var latitude = '1';
    var longitude = '1';

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: new google.maps.LatLng(latitude, longitude)
        });
        for(var i = 0; i < address.locations.length; i++){

            new google.maps.Marker({
                position: new google.maps.LatLng(address.locations[i]['lat'], address.locations[i]['long']),
                map: map
            }).addListener('click', function(){
                new google.maps.InfoWindow({
                    content: '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h5>' + i +'</h5>'+
            '<div id="bodyContent">'+
            '</div>'+
            '</div>'
                }).open(map, this);
            })
        }
    }

</script>

I'm trying to display i onClick of the marker. So for the first maker I should be 0 and for the second 1. But somehow i is always the same value

解决方案

This is a classic closure problem. The function which is using the i variable is a async callback.

The first thing what is happening is, that all the markers will be created. Therefore i will be address.locations.length at the end of the loop. The async callbacks now reference this exact variable.

There are some possible fixes for this:

use the let statement if you are able to use ES6 JavaScript features:

for(let i = 0; i < address.locations.length; i++){
    [...]
}

The second one is to create a closure with this exact binding:

for(var i = 0; i < address.locations.length; i++){
    (function(i){
        [...]
    })(i)
}

The last option for you is to use the Function.bind method.

for(var i = 0; i < address.locations.length; i++){

    new google.maps.Marker({
        position: new google.maps.LatLng(address.locations[i]['lat'], address.locations[i]['long']),
        map: map
    }).addListener('click', (function(i){
        new google.maps.InfoWindow({
            content: '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h5>' + i +'</h5>'+
    '<div id="bodyContent">'+
    '</div>'+
    '</div>'
        }).open(map, this);
    }).bind(this,i))
}

I hope that one of this methods will work for you.

这篇关于为Google地图标记JavaScript添加onclick监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！