17

ユーザーが編集可能な Google マップを持っており、ユーザーは描画マネージャーを使用してオーバーレイ ポリゴンをマップ上に描画できます。これは正常に機能し、コンソールは必要な緯度経度を記録します。ただし、間違いがあった場合に再度描画できるように、ポリゴンのマップをクリアするボタンを追加する必要があります。私の実装コードを以下に貼り付けます。

geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(<?php echo $latitude ?>, <?php echo $longitude ?>);
       var myOptions = {
         zoom: <?php echo $zoomlevel ?>,
         center: latlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

       marker = new google.maps.Marker({
         map:map,
         draggable:true,
         animation: google.maps.Animation.DROP,
         position: latlng
       })

       pos = marker.position;
       //alert(pos);
       document.getElementById("gpsite-surgery-latitude").value = pos.lat();
       document.getElementById("gpsite-surgery-longitude").value = pos.lng();

       google.maps.event.addListener(marker, "dragend", function() {
               var myLatLng = marker.latLng;

               pos = marker.position;
               //alert(pos);
               document.getElementById("gpsite-surgery-latitude").value = pos.lat();
               document.getElementById("gpsite-surgery-longitude").value = pos.lng();
       })

       google.maps.event.addListener(map, 'zoom_changed', function() {
          document.getElementById("gpsite-surgery-zoomlevel").value = map.getZoom();
       });

       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.POLYGON]
        },
        polygonOptions: {
            fillColor: '#ffff00',
            fillOpacity: 0.4,
            strokeWeight: 3,
            clickable: true,
            zIndex: 1,
            editable: false
        }
       });


       google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
            var coordinates = (polygon.getPath().getArray());
            console.log(coordinates);
        });

       drawingManager.setMap(map);

   });

地図上にもマーカーがありますが、これは無視してかまいません。

4

3 に答える 3

39

このコードを調べてください、それはあなたが話しているものとまったく同じように聞こえます、形を削除するためのボタン

http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html

編集：上記のリンクは壊れていますが、ここでそのコードを見つけることができました。

  // globals
  var drawingManager;
  var selectedShape;

  ...

  function clearSelection() {
    if (selectedShape) {
      selectedShape.setEditable(false);
      selectedShape = null;
    }
  }

  function setSelection(shape) {
    clearSelection();
    selectedShape = shape;
    shape.setEditable(true);
    selectColor(shape.get('fillColor') || shape.get('strokeColor'));
  }

  function deleteSelectedShape() {
    if (selectedShape) {
      selectedShape.setMap(null);
    }
  }

     google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
        if (e.type != google.maps.drawing.OverlayType.MARKER) {
        // Switch back to non-drawing mode after drawing a shape.
        drawingManager.setDrawingMode(null);

        // Add an event listener that selects the newly-drawn shape when the user
        // mouses down on it.
        var newShape = e.overlay;
        newShape.type = e.type;
        google.maps.event.addListener(newShape, 'click', function() {
          setSelection(newShape);
        });
        setSelection(newShape);
      }
    });

    // Clear the current selection when the drawing mode is changed, or when the
    // map is clicked.
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
    google.maps.event.addListener(map, 'click', clearSelection);
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

    buildColorPalette();
  }
于 2012-07-24T14:36:14.147 に答える
5

グローバル コンテキストでポリゴンへの参照が必要です。次に、ボタンのクリック ハンドラー関数で polygon.setMap(null) を呼び出します (ここで、polygon は多角形へのグローバル参照であり、投稿した不完全なスニペットからグローバルかどうかはわかりません)

于 2012-07-24T14:01:33.763 に答える