谷歌地图V3标志事件

Question

我有一个地图，增加了使用for循环和独立的功能

function initialize() { 
     // Go and fetch the pointers from the database and create an array of them here 
     pointerArray.push(new pointers("meet coach", 51.4550, -0.969088)); 
     pointerArray.push(new pointers("meet coach", 51.4530, -0.964195)); 
     pointerArray.push(new pointers("meet coach", 51.0530, -0.714195)); 
     pointerArray.push(new pointers("meet coach", 51.3530, -0.114195)); 

... 

     for (i = 0; i < pointerArray.length; i++) { 
      setTimeout(function() { 
       addMarkers(); 
      }, (i + 1) * 200); 
     } 
} 

function addMarkers() { 
     var latlng = new google.maps.LatLng(pointerArray[pointer].lat, pointerArray[pointer].long); 


     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      animation: google.maps.Animation.DROP, 
      title: pointerArray[pointer].title, 
      icon: "/images/icons/pointer-" + (pointer + 1) + ".png" 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      $('#mapDirections tr#' + (pointer + 1)).css('background', 'red'); 
     }); 


     pointer++; 
    } 

标记集合正如你看到的，我想在此将进行底部增加一个点击事件取决于被点击的标记（或相同的操作，但是不同的表格行）取出不同的动作。但是，它不起作用。调试它看起来好像click事件被替换为每个for循环而不是一个新创建的循环，所以它总是会更改最后一个表格行（本例中为第四个）的背景颜色。

任何帮助非常感谢。

克里斯

编辑：这是我的代码

<script type="text/javascript"> 

    var pointerArray = new Array(); 
    var map; 
    var lat; 
    var long; 
    var pointer = 0; 

    $(document).ready(function() { 

     initialize(); 

    }); 

    function initialize() { 
     // Go and fetch the pointers from the database and create an array of them here 
     pointerArray.push(new pointers("meet coach", 51.4550, -0.969088)); 
     pointerArray.push(new pointers("meet coach", 51.4530, -0.964195)); 
     pointerArray.push(new pointers("meet coach", 51.0530, -0.714195)); 
     pointerArray.push(new pointers("meet coach", 51.3530, -0.114195)); 

     var bounds = new google.maps.LatLngBounds(); ; 
     for (i = 0; i < pointerArray.length; i++) { 
      bounds.extend(new google.maps.LatLng(pointerArray[i].lat, pointerArray[i].long)); 
     } 

     // set map options 
     var myOptions = { 
      zoom: 16, 
      center: bounds.getCenter(), /* Center on the group here */ 
      mapTypeId: google.maps.MapTypeId.TERRAIN, 
      mapTypeControl: false, 
      panControl: false, 
      zoomControl: false, 
      streetViewControl: false, 
      scaleControl: false, 
      rotateControl: false 
     }; 

     // Generate map to draw on 
     map = new google.maps.Map(document.getElementById("map"), myOptions); 
     map.fitBounds(bounds); 

     // my position 
     for (i = 0; i < pointerArray.length; i++) { 
      setTimeout(function() { 
       addMarkers(); 
      }, (i + 1) * 200); 
     } 

    } 


    function addMarkers() { 
     var latlng = new google.maps.LatLng(pointerArray[pointer].lat, pointerArray[pointer].long); 


     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      animation: google.maps.Animation.DROP, 
      title: pointerArray[pointer].title, 
      icon: "/images/icons/pointer-" + (pointer + 1) + ".png" 
     }); 

     var currPointer = pointer; 
     google.maps.event.addListener(marker, 'click', function() { 
      $('#mapDirections tr#' + (currPointer + 1)).css('background', 'red'); 
     }); 


     pointer++; 
    } 


    function pointers(title, lat, long) { 
     this.title = title; 
     this.lat = lat; 
     this.long = long; 
    } 




</script> 

解决:)

发现这篇文章在这里：http://www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop

从本质上讲，必须点击中移动功能事件给一个外部函数，它返回了一个我想要的效果的函数。看起来这可能是一个常见的Javascript事物，不仅仅与地图有关。只是我的经验不足！

希望这可以帮助你。

Answer 1

解决:)

本文这里找到：http://www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop

从本质上讲，必须点击事件中移动功能一个用m返回函数的外部函数y期望的效果。看起来这可能是一个常见的Javascript事物，不仅仅与地图有关。只是我的经验不足！

希望这可以帮助你。

Answer 2

变量pointer在哪里以及如何定义？事件处理程序没有被替换，但每次调用时它都读取全局变量pointer，在地图上创建所有标记后，它应始终为4。

尝试更换

google.maps.event.addListener(marker, 'click', function() { 
     $('#mapDirections tr#' + (pointer + 1)).css('background', 'red'); 
    }); 

与

var currPointer = pointer; 
    google.maps.event.addListener(marker, 'click', function() { 
     $('#mapDirections tr#' + (currPointer + 1)).css('background', 'red'); 
    });