我有一个用户可编辑的Google地图,用户可以使用绘图管理器在地图上绘制覆盖多边形。这很好用,控制台记录了我需要的经纬度。然而,我需要添加一个按钮来清除地图上的多边形,以便如果出现错误,他们可以重新绘制。我的实现代码如下:
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(<?php echo $latitude ?>, <?php echo $longitude ?>);
var myOptions = {
zoom: <?php echo $zoomlevel ?>,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: latlng
})
pos = marker.position;
//alert(pos);
document.getElementById("gpsite-surgery-latitude").value = pos.lat();
document.getElementById("gpsite-surgery-longitude").value = pos.lng();
google.maps.event.addListener(marker, "dragend", function() {
var myLatLng = marker.latLng;
pos = marker.position;
//alert(pos);
document.getElementById("gpsite-surgery-latitude").value = pos.lat();
document.getElementById("gpsite-surgery-longitude").value = pos.lng();
})
google.maps.event.addListener(map, 'zoom_changed', function() {
document.getElementById("gpsite-surgery-zoomlevel").value = map.getZoom();
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.POLYGON]
},
polygonOptions: {
fillColor: '#ffff00',
fillOpacity: 0.4,
strokeWeight: 3,
clickable: true,
zIndex: 1,
editable: false
}
});
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
var coordinates = (polygon.getPath().getArray());
console.log(coordinates);
});
drawingManager.setMap(map);
});
地图上还有一个标记,你可以忽略它。