Question

我有两个功能可以在Google地图中绘制多边形。但是，当您绘制第一个多边形，然后选择按钮以绘制第二个多边形时，它们将被绘制。他们开始重叠。在这里查看我的JSFiddle：http://jsfiddle.net/ECssN/1

以下是我用来绘制多边形的内容（来自Google Maps API文档）：

function polygon1() {
    var polyOptions = {
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        fillColor: "#F390F9",
        editable: true,
        draggable: true
    };
    poly = new google.maps.Polygon(polyOptions);
    poly.setMap(map);
    google.maps.event.addListener(map, 'click', addPolygon1);
}

function addPolygon1(event) {
    var path = poly.getPath();
    path.push(event.latLng);

    var marker = new google.maps.Marker({
        position: event.latLng,
        title: '#' + path.getLength(),
    });
}

当用户点击按钮绘制第二个多边形时，如何取消选择第一个多边形，反之亦然？

jQuery .unbind或.removeAttr是一个很好的方法吗？不知道如何继续。

感谢您的帮助。

Answer 1

您必须将句柄保存到事件侦听器（对于第一个多边形按钮），然后在开始绘制第二个多边形时将其清除。请参阅example at jsfiddle。

handle01 = google.maps.event.addListener(map, 'click', addPolygon1);
...

function polygon2() {
    google.maps.event.removeListener(handle01);
    var polyOptions = {
    ...

您可以对第二个多边形执行相同操作。

Answer 2

最好的方法是将每个多边形存储到一个数组中，或者在您的情况下存储一个全局变量（您似乎将其作为poly）。在设置之前检查是否存在多边形，如果存在，则在设置新地图之前取消设置地图。

function polygon1() {
    var polyOptions = {
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        fillColor: "#F390F9",
        editable: true,
        draggable: true
    };
    if( poly )                                        // <-----
        poly.setMap(null);                            // <-----
    poly = new google.maps.Polygon(polyOptions);
    poly.setMap(map);
    google.maps.event.addListener(map, 'click', addPolygon1);
}

function addPolygon1(event) {
    var path = poly.getPath();
    path.push(event.latLng);

    var marker = new google.maps.Marker({
        position: event.latLng,
        title: '#' + path.getLength(),
    });
}

在Google地图上绘制时多边形重叠

2 个答案: