让用户只画出一个圆圈作为源,但一些圆圈用于目标
问题描述:
我有一个非常简单的应用程序(只有一个页面),用户在地图上绘制多边形,并且它也获得纬度,长度,中心和半径的圆用户画了。让用户只画出一个圆圈作为源,但一些圆圈用于目标
我想限制用户只绘制一个圆圈作为源(我做的很好),然后让他/她在地图上选择一个或多个目的地。所以,第一个圈可能是“源”和下一个圆是“目的地” ..
我的问题:我怎么可以分配不同的变量,这些圈子,以区分目的地源的地方吗?
这里是我的代码(我使用谷歌的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);
}
你怎么知道用户想要的绘制(源或目标)是什么? – 2015-02-24 13:46:16
@ Dr.Molle:我在想的是要求用户“请通过在地图上绘制来选择您的源代码”,然后用户绘制的第一个圆圈就是源代码。之后,我可以显示一条消息,指出您选择了源代码,“现在你可以通过在地图上绘制圆圈再次选择一个或多个目的地。”这就是我的想法!我不确定:( – mOna 2015-02-24 13:48:54
所以你想要第一个圈永远是源头,并进一步圈出目的地? – 2015-02-24 14:03:06