我将使用来自https://developers.google.com/maps/documentation/javascript/examples/drawing-tools的示例,使用户能够选择一个点并绘制一个圆圈。
但是,我还需要:
- get the lat/lang of center of circle that user draw.
- get the radius of circle.
also the code allows user to draw more than one circle, if possible, I need to restrict user to draw only one circle, if user draw another circle, first circle should be removed.
function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8 };
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
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.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE ] }, markerOptions: { icon: 'images/beachflag.png' }, circleOptions: { fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1 } }); drawingManager.setMap(map); }
google.maps.event.addDomListener(window, 'load', initialize);