添加自定义元素到谷歌地图绘制的多边形/圆圈

时间:2015-10-05 09:43:11

标签: javascript google-maps google-maps-api-3

我有一个谷歌地图设置,允许用户绘制多个形状并搜索绘制的区域。

我已经完成了所有这些工作但我正在努力寻找有关向现有或相当绘制的叠加层添加元素的信息。

例如,我有一个按钮,您可以选择一个形状,然后单击按钮将其删除,这很好,但我想更进一步,并为每个绘制的形状叠加添加一个X图标,允许用户单击去除每个形状。我可以删除它正在努力的元素。

我已经搜索了谷歌的代码示例,因为我知道这已经完成了我只是无法弄清楚代码将被调用到哪里执行此操作我假设它在一个类似覆盖完整的侦听器上,任何人都可以指向任何文档在做这个或已知的方法?

编辑:

认为我在叠加完成后走在正确的轨道上我已经做了一些添加了形状的东西所以我想我将能够在这个事件中添加内容,如果有人想知道的话我会发布一些代码。< / p>

到目前为止,我仍然因为它在定位方面苦苦挣扎,你发送了一个圆形的叠加层。

function i(i) {
    function s() {
        i.setMap(null), google.maps.event.trigger(i, "delete")
    }
    var o = this;
    this.circle = i;
    console.log(ajax_object.plugin_url + "/center-marker.png");
    var markers = new google.maps.Marker({
        position: i.getCenter(),
        icon: {
            url: ajax_object.plugin_url + "/center-marker.png",
            size: new google.maps.Size(30, 30),
            scaledSize: new google.maps.Size(30, 30),
            anchor: new google.maps.Point(12, 33)
        },
        draggable: !0,
        raiseOnDrag: !1
    });
    var f = new google.maps.Marker({
        icon: {
            url: ajax_object.plugin_url + "/map-delete.png",
            anchor: new google.maps.Point(11, 11)
        }
    });
    var e = new google.maps.Marker({
        icon: {
            url: ajax_object.plugin_url + "/circle-resize.png",
            size: new google.maps.Size(27, 13),
            scaledSize: new google.maps.Size(27, 13),
            anchor: new google.maps.Point(14, 10)
        }
    });
    var r = new google.maps.Marker({
        icon: {
            url: ajax_object.plugin_url + "/blank.gif",
            scaledSize: new google.maps.Size(34, 20),
            anchor: new google.maps.Point(17, 10)
        },
        draggable: !0,
        raiseOnDrag: !1
    });
    markers.bindTo("map", i)
    f.bindTo("map", i)
    e.bindTo("map", i)
    r.bindTo("map", i)
    markers.bindTo("position", i, "center"),
    i.bindTo("north", f, "position"),
    i.bindTo("east", e, "position"),
    e.bindTo("visible", i, "markersVisible"),
    r.bindTo("visible", i, "markersVisible"),
    markers.bindTo("visible", i, "markersVisible"),
    f.bindTo("visible", i, "markersVisible")
}

1 个答案:

答案 0 :(得分:0)

在附加到“overlaycomplete”

的侦听器中调用以下内容 是形状。

I(e.overlay);

Result

function t(n) {
    var i, t, r, u, f, e, o, s;
    i = n.getBounds && n.getBounds(); i && (r = i.getNorthEast());
    u = i.getSouthWest();
    t = n.getCenter();
    f = new google.maps.LatLng(r.lat(), t.lng());
    e = new google.maps.LatLng(t.lat(), r.lng());
    o = new google.maps.LatLng(u.lat(), t.lng());
    s = new google.maps.LatLng(t.lat(), u.lng());
    n.set("north", f);
    n.set("east", e);
    n.set("south", o);
    n.set("west", s);
}


function i(i) {
    function s() {
        i.setMap(null), google.maps.event.trigger(i, "delete")
    }
    var o = this;
    this.circle = i;
    console.log(ajax_object.plugin_url + "/center-marker.png");
    var u = new google.maps.Marker({
        position: i.getCenter(),
        icon: {
            url: ajax_object.plugin_url + "/center-marker.png",
            size: new google.maps.Size(30, 30),
            scaledSize: new google.maps.Size(30, 30),
            anchor: new google.maps.Point(15, 27)
        },
        draggable: !0,
        raiseOnDrag: !1
    });
    var f = new google.maps.Marker({
        icon: {
            url: ajax_object.plugin_url + "/map-delete.png",
            anchor: new google.maps.Point(11, 11)
        }
    });
    var e = new google.maps.Marker({
        icon: {
            url: ajax_object.plugin_url + "/circle-resize.png",
            size: new google.maps.Size(27, 13),
            scaledSize: new google.maps.Size(27, 13),
            anchor: new google.maps.Point(14, 10)
        }
    });
    var r = new google.maps.Marker({
        icon: {
            url: ajax_object.plugin_url + "/blank.gif",
            scaledSize: new google.maps.Size(34, 20),
            anchor: new google.maps.Point(17, 10)
        },
        draggable: !0,
        raiseOnDrag: !1
    });

    u.bindTo("map", i);
    f.bindTo("map", i);
    e.bindTo("map", i);
    r.bindTo("map", i);
    u.bindTo("position", i, "center");
    i.bindTo("north", f, "position");
    i.bindTo("east", e, "position");
    e.bindTo("visible", i, "markersVisible");
    r.bindTo("visible", i, "markersVisible");
    u.bindTo("visible", i, "markersVisible");
    f.bindTo("visible", i, "markersVisible");

    google.maps.event.addListener(i, "customeditable_changed", function() {
        var i = this.get("customEditable");
        var t;
        this.set("markersVisible", i);
        t = $.extend({}, n.circle[i ? "edit" : "view"]);
        t.editable = !1;
        this.setOptions(t)
    });
    google.maps.event.addListener(i, "visible_changed", function() {
        var n = this.getVisible();
        this.set("markersVisible", n)
    });
    google.maps.event.addListener(u, "position_changed", function() {
        t(i);
        r.setPosition(i.get("east"))
    })
    t(i);
    r.setPosition(i.get("east"));
    google.maps.event.addListener(r, "position_changed", function() {
        var r = google.maps.geometry.spherical.computeDistanceBetween(this.getPosition(), i.getCenter());
        i.setRadius(r);
        t(i);
    });
    google.maps.event.addListener(r, "dragend", function() {
        r.setPosition(i.get("east"))
    });
    google.maps.event.addListener(f, "click", s);
    i["delete"] = s;
}