将自定义元素添加到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; 
}