谷歌地圖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'); 
    });