向Google地图绘制的多边形/圆形添加自定义元素

Question

I have a google map setup which allows a user to draw multiple shapes and search the areas drawn.

I have all of that already working but I am struggling to find information on adding elements to an existing or rather drawn overlay.

For example I have a button which lets you select a shape and click the button to delete it, that's fine but I wanted to take this one step further and add an X icon to each drawn shapes overlay which allows the user to click that to remove each shape. I can do the removal its the element I am struggling with.

I have searched google for code examples as I know this has been done I just can't figure out where the code would be called to do this I assume its on a listener like overlay complete, could anyone point me to any docs on doing this or known methods?

EDIT:

Think I am on the right track upon overlay complete I am already doing some stuff with the shapes added so I think I will be able to add things in this event, I will post some code when done if anyone is wondering.

So far I got this still messing around with it struggling with positioning, you sent the overlay of a circle to this.

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

The following is called in a listener attached to "overlaycomplete"

e being the shape.

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