让用户只画出一个圆圈作为源，但一些圆圈用于目标

Question

我有一个非常简单的应用程序（只有一个页面），用户在地图上绘制多边形，并且它也获得纬度，长度，中心和半径的圆用户画了。

我想限制用户只绘制一个圆圈作为源（我做的很好），然后让他/她在地图上选择一个或多个目的地。所以，第一个圈可能是“源”和下一个圆是“目的地” ..

我的问题：我怎么可以分配不同的变量，这些圈子，以区分目的地源的地方吗？

这里是我的代码（我使用谷歌的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> 

Answer 1

一个简单的方法：

商店各界，例如在一个数组中，根据数组的长度，你会知道它是第一个圆（源）还是不是（目标）。

设置不同的属性也不复杂，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); 
}