I have a very simple application (only one page) on which user draw polygons on the map and it also get lat, long, centre and radius of the circle that user drew.
I would like to limit user to draw only one circle as a source (Which I did and works fine), and then let him/her to select one or more destinations on the map. So, the first circle could be "source" and the next circles are "destinations"..
My question : how can I assign different variables to these circles in order to differentiate source place from destinations?
Here is my code (I used google api, Drawing library: https://developers.google.com/maps/documentation/javascript/examples/drawing-tools ):
<script type="text/javascript">
(function () {
var circle;
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.addListener(drawingManager, 'circlecomplete', onCircleComplete);
}
function onCircleComplete(shape) {
if (shape == null || (!(shape instanceof google.maps.Circle))) return;
if (circle != null) {
circle.setMap(null);
circle = null;
}
circle = shape;
var radius = circle.getRadius();
center = circle.getCenter();
var latitude = circle.getCenter().lat();
var longitude = circle.getCenter().lng();
}
google.maps.event.addDomListener(window, 'load', initialize);
})();
</script>
A simple approach:
Store all the circles, eg in an array, based on the length of the array you'll know if it's the first circle(source) or not(destination).
Setting different properties also isn't complicated, a google.maps.Circle
is a MVCObject(and also a native JS-object), you may store custom properties eg via:
//vanilla javascript shape.customProperty='customValue';
//MVCObject-specific, single property shape.set('customProperty','customValue');
//MVCObject-specific, multiple properties shape.setValues({customProperty :'customValue', anotherProperty:'anotherValue'});
//shape-specific, multiple properties shape.setOptions({customProperty :'customValue', anotherProperty:'anotherValue'});
( Be sure that your custom property-names not compete with built-in names, eg center, radius etc.)
Possible implementation(stores a custom type
-property for the circles, set to either source
or destination
):
function onCircleComplete(shape) {
var map=shape.getMap();
//create an array where we store the circles
if(!map.get('circles')){
map.set('circles',[]);
}
shape.setOptions(
(!map.get('circles').length)
?//first circle
{type:'source',
//a different fill when you want to
fillColor:'#ff0000'
}
://other circles
{type:'destination'}
);
//push the circles onto the array
map.get('circles').push(shape);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.