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

时间:2014-04-02 18:36:12

标签: javascript google-maps

我有两个功能可以在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是一个很好的方法吗?不知道如何继续。

感谢您的帮助。

2 个答案:

答案 0 :(得分:2)

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

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

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

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

答案 1 :(得分:0)

最好的方法是将每个多边形存储到一个数组中,或者在您的情况下存储一个全局变量(您似乎将其作为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(),
    });
}