讓用戶僅畫一個圓作為源，但畫一些圓作為目標

Question

我有一個非常簡單的應用程序（只有一頁），用戶可以在該應用程序上在地圖上繪制多邊形，並且還可以獲取用戶繪制的圓的緯度，經度，中心和半徑。

我想限制用戶僅畫一個圓作為來源（我做過並且工作得很好），然后讓他/她在地圖上選擇一個或多個目的地。 因此，第一個圓圈可以是“源”，第二個圓圈可以是“目的地”。

我的問題 ：如何為這些圈子分配不同的變量，以區分來源地和目的地？

這是我的代碼（我使用了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>

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);
}