Question

我正在使用drawingManager在Google地图上绘制多个预定义形状。

代码获取形状数据，正确绘制并附加单击事件。出于某种原因，所有点击事件都附加到最后创建的形状。

该函数遍历一个如下所示的形状数组：

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 overlay - 并因此将事件绑定到右边的叠加层

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);
        });
    }
}

如何在谷歌地图上添加多个形状的监听器？

1 个答案: