將自定義元素添加到Google地圖繪製的多邊形/圓圈

Question

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

我已經全部都在工作，但我正在努力尋找添加元素到現有或相當繪製的疊加層的信息。

例如，我有一個按鈕讓您選擇一個形狀，然後單擊該按鈕將其刪除，這很好，但我想更進一步，併爲每個繪製的形狀疊加添加一個X圖標，以允許用戶單擊以刪除每個形狀。我可以去除它與我掙扎的元素。

我已經搜索谷歌的代碼示例，因爲我知道這已完成我只是無法弄清楚代碼將被調用來做到這一點，我假設它對像疊加完整的監聽器，任何人都可以指向我任何文檔在做這個或已知的方法？

編輯：

認爲我是在覆蓋完整的我已經做了一些東西，添加了所以我認爲我將能夠添加的東西在此事件中的形狀在正確的軌道上，我將發佈一些代碼時如果有人想知道，就完成了。

到目前爲止，我仍然擺弄着它與定位掙扎，你發送一個圈的覆蓋這個。

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