我正在編寫一個應用程序,允許用戶使用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