如何在Google地圖上添加監聽器到多個形狀？

Question

我正在使用drawingManager在谷歌地圖上繪製多個預定義的形狀。

該代碼獲取形狀數據，正確繪製並附加單擊事件。由於某些原因，所有點擊事件都附加到最後創建的形狀。

功能越過一個形狀排列，看起來像這樣：

var shapes = []; 
     shapes.push({type: "rectangle",color: "#1E90FF",bounds: {north:-33.801973518065886,east:150.1171875,south:-34.17090836352573,west:149.0350341796875},});shapes.push({type: "circle",color: "#FF1493",center_lat: -34.58799745550482,center_lng: 149.0570068359375,radius: 53651.36068322843,});shapes.push({type: "circle",color: "#FF1493",center_lat: -33.47269019266663,center_lng: 150.732421875,radius: 29928.694032699615,}); 

的代碼如下所示：

function drawShaps(clickable) { 
    for (var shape in shapes) { 
     if (shapes[shape].type == 'circle') { 
      overlay = new google.maps.Circle({ 
       map: map, 
       center: {lat: shapes[shape].center_lat, lng: shapes[shape].center_lng}, 
       radius: shapes[shape].radius, 
       fillOpacity: 0.45, 
       strokeWeight: 0, 
       fillColor: shapes[shape].color 
      }); 
     } else if (shapes[shape].type == 'polyline') { 
      overlay = new google.maps.Polyline({ 
       map: map, 
       path: shapes[shape].coordinates, 
       geodesic: true, 
       strokeWeight: 2, 
       fillOpacity: 0.45, 
       strokeColor: shapes[shape].color 
      }); 
     } else if (shapes[shape].type == 'rectangle') { 
      overlay = new google.maps.Rectangle({ 
       map: map, 
       bounds: shapes[shape].bounds, 
       fillOpacity: 0.45, 
       strokeWeight: 0, 
       fillColor: shapes[shape].color 
      }); 
     } else if (shapes[shape].type == 'polygon') { 
      overlay = new google.maps.Polygon({ 
       map: map, 
       paths: shapes[shape].coordinates, 
       geodesic: true, 
       fillOpacity: 0.45, 
       strokeWeight: 0, 
       fillColor: shapes[shape].color 
      }); 
     } 
     overlay.type = shapes[shape].type; 
     overlay.color = shapes[shape].color; 
     overlays.push(overlay); 
     if (clickable) { 
      google.maps.event.addListener(overlay, 'click', function(e) { 
       clickSelectShape(overlay, e); 
      }); 
     } 
    } 
} 

缺少什麼我在這裏？我知道它與範圍/可變地址有關 - 但不明白...

Answer 1

好的，發現問題 - 如果任何人在將來有同樣的問題。 var overlay針對整個函數聲明瞭一次 - 並且在循環中被覆蓋 - 即將不同的點擊事件綁定到相同的形狀。

正確的方法是創建不同createShape功能，每個定義它自己的VAR覆蓋 - 和爲此結合事件向右覆蓋

function drawShaps(clickable) { 
    for (var shape in shapes) { 
     if (shapes[shape].type == 'circle') { 
      createCircle(shapes[shape], clickable); 
     } else if (shapes[shape].type == 'polyline') { 
      createPolyline(shapes[shape], clickable); 
     } else if (shapes[shape].type == 'rectangle') { 
      createRectangle(shapes[shape], clickable); 
     } else if (shapes[shape].type == 'polygon') { 
      createPolygon(shapes[shape], clickable); 
     } 

    } 
} 

function createCircle(newShape, clickable) { 
    var overlay = new google.maps.Circle({ 
     map: map, 
     center: {lat: newShape.center_lat, lng: newShape.center_lng}, 
     radius: newShape.radius, 
     fillOpacity: 0.45, 
     strokeWeight: 0, 
     fillColor: newShape.color 
    }); 
    overlay.type = newShape.type; 
    overlay.color = newShape.color; 
    overlays.push(overlay); 
    if (clickable) { 
     google.maps.event.addListener(overlay, 'click', function(e) { 
      clickSelectShape(overlay, e); 
     }); 
    } 

} 

function createPolyline(newShape, clickable) { 
    var overlay = new google.maps.Polyline({ 
     map: map, 
     path: newShape.coordinates, 
     geodesic: true, 
     strokeWeight: 2, 
     fillOpacity: 0.45, 
     strokeColor: newShape.color 
    }); 
    overlay.type = newShape.type; 
    overlay.color = newShape.color; 
    overlays.push(overlay); 
    if (clickable) { 
     google.maps.event.addListener(overlay, 'click', function(e) { 
      clickSelectShape(overlay, e); 
     }); 
    } 
} 

function createRectangle(newShape, clickable) { 
    var overlay = new google.maps.Rectangle({ 
     map: map, 
     bounds: newShape.bounds, 
     fillOpacity: 0.45, 
     strokeWeight: 0, 
     fillColor: newShape.color 
    }); 
    overlay.type = newShape.type; 
    overlay.color = newShape.color; 
    overlays.push(overlay); 
    if (clickable) { 
     google.maps.event.addListener(overlay, 'click', function(e) { 
      clickSelectShape(overlay, e); 
     }); 
    } 
} 

function createPolygon(newShape, clickable) { 
    var overlay = new google.maps.Polygon({ 
     map: map, 
     paths: newShape.coordinates, 
     geodesic: true, 
     fillOpacity: 0.45, 
     strokeWeight: 0, 
     fillColor: newShape.color 
    }); 
    overlay.type = newShape.type; 
    overlay.color = newShape.color; 
    overlays.push(overlay); 
    if (clickable) { 
     google.maps.event.addListener(overlay, 'click', function(e) { 
      clickSelectShape(overlay, e); 
     }); 
    } 
}