Question

我试图制作一个Web应用程序类型的东西，你可以在地图上定义一个区域，它会告诉你那个区域的大小。

目前，每当有新的＆＃34;点时，该区域都会更新。被添加到区域大纲中。

我遇到过2个问题。

首先，我似乎无法弄清楚在编辑区域时如何更新区域大小计算。（如在移动现有点时）

而且，我不能为我的生活找出如何移除或重置多边形。

我的HTML ...

<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<div id="right-panel">
  <p>Area:</p>
  <p><textarea id="areaValue"></textarea>m</p>
  <p id="clearPoly">Clear</button>
</div>

我的Javscript ......

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      mapTypeId: 'satellite',
      center: {lat: 52.486741, lng: -2.8055232}
    });
    var heading = 0;
    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });
    var markers = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
      var places = searchBox.getPlaces();
      if (places.length == 0) {
        return;
      }
      // Clear out the old markers.
      markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];
      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
        var icon = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        };
        // Create a marker for each place.
        markers.push(new google.maps.Marker({
          map: map,
          icon: icon,
          title: place.name,
          position: place.geometry.location
        }));
        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });
    var poly = new google.maps.Polygon({
      strokeColor: '#f32222',
      strokeOpacity: 1,
      strokeWeight: 3,
      editable: true,
      map: map
    });
    // Add a listener for the click event
    google.maps.event.addListener(map, 'click', function(event) {
      addLatLngToPoly(event.latLng, poly);
    });

    document.getElementById("clearPoly").onclick = function(){
      heading = 0;
      document.getElementById("areaValue").value = heading;
     path(null);
     path.push(latLng);
    }
  }

  function addLatLngToPoly(latLng, poly) {
    var path = poly.getPath();
    // Because path is an MVCArray, we can simply append a new coordinate
    // and it will automatically appear
    path.push(latLng);
    heading = google.maps.geometry.spherical.computeArea(path);
    heading = (Math.trunc(heading));
    document.getElementById("areaValue").value = heading;
  }

Answer 1

检查出来：https://github.com/beekay-/gmaps-samples-v3/blob/master/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();
  }

Answer 2

请参阅documentation。您需要收听多边形路径的编辑事件：

<强>多边形



insert_at

remove_at

set_at


必须在多边形的路径上设置侦听器。如果多边形有多个路径，则必须在每个路径上设置一个侦听器。

将计算区域的代码移动到函数（calcArea）中并在这些事件上调用它。

poly = new google.maps.Polygon({
  strokeColor: '#f32222',
  strokeOpacity: 1,
  strokeWeight: 3,
  editable: true,
  map: map
});
google.maps.event.addListener(poly.getPath(), 'insert_at', calcArea);
google.maps.event.addListener(poly.getPath(), 'set_at', calcArea);

function calcArea() {
  var path = poly.getPath();
  area = google.maps.geometry.spherical.computeArea(path);
  area = (Math.trunc(area));
  document.getElementById("areaValue").value = area;
}

清除多边形时，将其路径设置回空数组，然后重新添加这些事件侦听器：

document.getElementById("clearPoly").onclick = function() {
  area = 0;
  document.getElementById("areaValue").value = area;
  poly.setPath([]);
  path = poly.getPath();
  google.maps.event.addListener(poly.getPath(), 'insert_at', calcArea);
  google.maps.event.addListener(poly.getPath(), 'set_at', calcArea);
}

proof of concept fiddle

代码段

＆＃13;

var poly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    mapTypeId: 'satellite',
    center: {
      lat: 52.486741,
      lng: -2.8055232
    }
  });
  var area = 0;
  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });
  var markers = [];
  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();
    if (places.length == 0) {
      return;
    }
    // Clear out the old markers.
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];
    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }
      var icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };
      // Create a marker for each place.
      markers.push(new google.maps.Marker({
        map: map,
        icon: icon,
        title: place.name,
        position: place.geometry.location
      }));
      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });
  poly = new google.maps.Polygon({
    strokeColor: '#f32222',
    strokeOpacity: 1,
    strokeWeight: 3,
    editable: true,
    map: map
  });
  google.maps.event.addListener(poly.getPath(), 'insert_at', calcArea);
  google.maps.event.addListener(poly.getPath(), 'set_at', calcArea);


  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', function(event) {
    addLatLngToPoly(event.latLng, poly);
  });

  document.getElementById("clearPoly").onclick = function() {
    area = 0;
    document.getElementById("areaValue").value = area;
    poly.setPath([]);
    path = poly.getPath();
    google.maps.event.addListener(poly.getPath(), 'insert_at', calcArea);
    google.maps.event.addListener(poly.getPath(), 'set_at', calcArea);
  }
}

function addLatLngToPoly(latLng, poly) {
  var path = poly.getPath();
  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);
  calcArea();
}

function calcArea() {
  var path = poly.getPath();
  area = google.maps.geometry.spherical.computeArea(path);
  area = (Math.trunc(area));
  document.getElementById("areaValue").value = area;
}

＆＃13;

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<div id="right-panel">
  <p>Area:</p>
  <p><textarea id="areaValue"></textarea>m</p>
  <button id="clearPoly">Clear</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry&callback=initMap" async defer></script>

＆＃13;

如何从Google地图中删除多边形

2 个答案: