我正在编写一个应用程序,允许用户使用Google Maps API绘制地理多边形“区域”并将它们保存在数据库中。每个用户只能有一个区域,所以我通过切换到手并在overlaycomplete上隐藏绘图工具来限制此区域。 overlaycomplete后,我能够保存并保存在我的数据库中 - 就这样有效。此外,我可以从数据库中检索多边形,并将其显示为地图上的可编辑多边形。我遇到的问题是:在Google地图中预加载可编辑绘图管理器多边形
当试图拖动插入的多边形的点时,它们会“卡住”到鼠标,从不释放。我的猜测是某种mouseup问题?
尽管已经存在多边形,但我仍然可以绘制另一个多边形。如果从数据库加载多边形,我应该在开始时隐藏绘图工具吗?
如何将一个事件附加到从数据库中拉出的多边形上,以便捕获它的顶点坐标?
你可以在这里看到我当前的代码:http://jsfiddle.net/FUUxz/以下:
JS:
var map; // Global declaration of the map
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
var lat_longs = new Array();
var markers = new Array();
var drawingManager;
function initialize() {
var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.POLYGON]
},
polygonOptions: {editable:true,fillColor:'#ff0000',strokeColor:'#ff0000',strokeWeight:2}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
var newShape = event.overlay;
newShape.type = event.type;
if (event.type==google.maps.drawing.OverlayType.POLYGON) {
overlayClickListener(event.overlay);$('#polygon').val(event.overlay.getPath().getArray());drawingManager.setOptions({drawingMode:null,drawingControl:false});
}
});
var polygon_plan_0 = [
new google.maps.LatLng(40.9534555976547, -74.0871620178223)
,
new google.maps.LatLng(40.9410084152192, -74.0948867797852)
,
new google.maps.LatLng(40.9411380854622, -74.1165161132812)
,
new google.maps.LatLng(40.9490474888751, -74.1221809387207)
,
new google.maps.LatLng(40.955140973234, -74.124584197998)
,
new google.maps.LatLng(40.9604561066844, -74.1153144836426)
,
new google.maps.LatLng(40.9534555976547, -74.0871620178223)
];
lat_longs.push(new google.maps.LatLng(40.9534555976547, -74.0871620178223));
lat_longs.push(new google.maps.LatLng(40.9410084152192, -74.0948867797852));
lat_longs.push(new google.maps.LatLng(40.9411380854622, -74.1165161132812));
lat_longs.push(new google.maps.LatLng(40.9490474888751, -74.1221809387207));
lat_longs.push(new google.maps.LatLng(40.955140973234, -74.124584197998));
lat_longs.push(new google.maps.LatLng(40.9604561066844, -74.1153144836426));
lat_longs.push(new google.maps.LatLng(40.9534555976547, -74.0871620178223));
var polygon_0 = new google.maps.Polygon({
path: polygon_plan_0,
strokeColor: "#ff0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#ff0000",
fillOpacity: 0.3,
editable: true
});
polygon_0.setMap(map);
google.maps.event.addListener(polygon_0, "mouseup", function(event) {
overlayClickListener(event.overlay);$('#polygon').val(event.overlay.getPath().getArray());drawingManager.setOptions({drawingMode:null,drawingControl:false});
});
}
function createMarker(markerOptions) {
var marker = new google.maps.Marker(markerOptions);
markers.push(marker);
lat_longs.push(marker.getPosition());
return marker;
}
initialize();
function overlayClickListener(overlay) {
google.maps.event.addListener(overlay, "mouseup", function(event){
$('#polygon').val(overlay.getPath().getArray());
});
}
HTML:
<div id="map_canvas" style="width:100%; height:450px;"></div>
<form action="http://garbagedayreminder.com/test/save" method="post" accept-charset="utf-8" id="map_form">
<input type="text" name="polygon" value="" id="polygon" />
<input type="submit" name="save" value="Save!" id="save" />
</form>
见[此工作示例](http://www.geocodezip.com/blitz-gmap-editor/test5.html),是否所有这一切(除了数据库部分)的基础上,[blitz- gmap-editor](http://code.google.com/p/blitz-gmap-editor/) – geocodezip 2013-03-19 16:20:41
您应该使用**点击**而不是** mouseup ** – 2013-03-19 16:22:54
为什么这个问题有标签google-maps- API-2?它只与Google Maps API v3有关。 – geocodezip 2013-03-19 17:11:28