如何使用谷歌地圖事件監聽器傳遞變量並提交表單

Question

我正在關注此處的 Google Maps v3 演示庫示例，它是一個矩形疊加層。 我修改了矩形以使其可點擊。

rectangle = new google.maps.Rectangle({
   map: map,
   clickable: true
});

然后我向矩形添加了一個事件偵聽器

google.maps.event.addListener(rectangle, 'click', editSite);

並制定了一種方法使表單提交，並且它正常工作。

function editSite() {
    document.getElementById("siteSelection").value = 22;
    document.siteSelectionForm.submit();
}

接下來，我通過添加一個參數更改了 editSite 的簽名。

google.maps.event.addListener(rectangle, 'click', editSite(22));

...

function editSite(siteId) {
    document.getElementById("siteSelection").value = siteId;
    document.siteSelectionForm.submit();
}

它停止正常工作。 加載地圖后，表單將立即提交，這是在我有機會單擊矩形之前。 就好像該方法在頁面重新加載期間被添加到偵聽器后立即被調用。

我的目標是能夠創建許多矩形，每個矩形在單擊時將唯一 ID 傳遞給 editSite。 我怎樣才能做到這一點並避免我創造的問題？

Answer 1

這不會像你期望的那樣（並且它缺少一個結束的“）”，這是一個錯字嗎？）：

google.maps.event.addListener(rectangle, 'click', editSite(22);

沒有參數的“editSite”是一個函數指針（在你的“工作”代碼中）：

google.maps.event.addListener(rectangle, 'click', editSite);

如果您添加一個參數，它會立即執行，並且返回值用作事件發生時要執行的函數（在這種情況下不是您想要的）。 如果要使用參數調用命名函數，請將其包裝在匿名函數中：

google.maps.event.addListener(rectangle, 'click', function() {
  editSite(22);
});