[英]HTML5 Canvas - Draw segments and circles - Different color for one circle
[英]let user draw only one circle as source but some circles for destination
我有一个非常简单的应用程序(只有一页),用户可以在该应用程序上在地图上绘制多边形,并且还可以获取用户绘制的圆的纬度,经度,中心和半径。
我想限制用户仅画一个圆作为来源(我做过并且工作得很好),然后让他/她在地图上选择一个或多个目的地。 因此,第一个圆圈可以是“源”,第二个圆圈可以是“目的地”。
我的问题 :如何为这些圈子分配不同的变量,以区分来源地和目的地?
这是我的代码(我使用了Google api,图形库: 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>
一个简单的方法:
根据数组的长度将所有圆存储在数组中,例如,将其存储在数组中,您将知道它是第一个圆(源)还是不是第一个圆(目标)。
设置不同的属性也并不复杂, google.maps.Circle
是MVCObject(也是本机JS对象),您可以通过以下方式存储自定义属性:
//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'});
(请确保您的自定义属性名称不会与内置名称(例如中心,半径等)竞争。)
可能的实现(为圈子存储自定义type
-property,设置为source
或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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.