在谷歌地图上绘图时多边形重叠

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