向Google地圖繪制的多邊形/圓形添加自定義元素

Question

我有一個谷歌地圖設置，允許用戶繪制多個形狀並搜索繪制的區域。

我已經完成了所有這些工作，但是我正在努力尋找有關在現有的或繪制的疊加層上添加元素的信息。

例如，我有一個按鈕，可讓您選擇一個形狀並單擊該按鈕將其刪除，這很好，但我想更進一步，並在每個繪制的形狀疊加層上添加一個X圖標，允許用戶單擊以將其刪除每個形狀。 我可以將其正在苦苦掙扎的元素清除掉。

我已經在google上搜索了代碼示例，因為我知道已經完成了，只是我不知道在哪里調用代碼可以做到這一點，我假設它在諸如overlay complete之類的偵聽器上，有人可以指出我這樣做的任何文檔嗎？或已知方法？

編輯：

認為疊加完成后我處在正確的軌道上，我已經在做一些添加了形狀的事情，所以我認為我可以在此事件中添加一些東西，如果有人想知道的話，我會在完成后發布一些代碼。

到目前為止，我仍然無法解決定位問題，您已將圓的疊加層發送給了它。

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

Answer 1

在附加到“ overlaycomplete”的偵聽器中調用以下內容

e是形狀。

i（e.overlay）;

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