GoogleMaps - 将可编辑多边形恢复到其原始状态（将其路径设置为以前的状态）

Question

我的 google 地图上有一个简单的多边形，可以编辑它。当用户编辑它时，他可以保存它，或者取消编辑。此时此刻，我想return将多边形恢复到编辑前的状态。我想，这可以用 getPaths() / setPaths() 方法来完成。但这对我不起作用。

$(".editButton").on('click', function() {
    myPolygon.setOptions({editable: true});
    originalPath = myPolygon.getPaths();
});

$(".cancelButton").on('click', function() {
    myPolygon.setOptions({editable: false});
    myPolygon.setPaths(originalPath);
});

我也尝试通过 setOptions() 方法设置路径，但这也没有将路径改回其原始形状。

还有其他方法可以实现吗？

Answer 1

myPolygon.getPaths() 正在返回对多边形中“实时”路径的引用，它会在您编辑多边形时更新。

一种选择是复制路径（如果有多个路径，则复制路径）。

originalPath = [];
for (var i=0; i<myPolygon.getPath().getArray().length; i++) {
  originalPath.push(myPolygon.getPath().getArray()[i]);
}

proof of concept fiddle

代码片段：

"use strict";

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: {
      lat: 24.886,
      lng: -70.268,
    },
    mapTypeId: "terrain",
  }); // Define the LatLng coordinates for the polygon's path.

  const triangleCoords = [{
      lat: 25.774,
      lng: -80.19,
    },
    {
      lat: 18.466,
      lng: -66.118,
    },
    {
      lat: 32.321,
      lng: -64.757,
    },
    {
      lat: 25.774,
      lng: -80.19,
    },
  ]; // Construct the polygon.

  const myPolygon = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: map
  });

  var originalPath;
  $(".editButton").on('click', function() {
    myPolygon.setOptions({editable: true});
    originalPath = [];
    for (var i=0; i<myPolygon.getPath().getArray().length; i++) {
      originalPath.push(myPolygon.getPath().getArray()[i]);
    }
  });

  $(".cancelButton").on('click', function() {
    myPolygon.setOptions({editable: false});
    myPolygon.setPath(originalPath);
  });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 90%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Polygon</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
  <input type="button" class="editButton" value="edit"/>
  <input type="button" class="cancelButton" value="cancel"/>
    <div id="map"></div>
  </body>
</html>

GoogleMaps - 将可编辑多边形恢复到其原始状态（将其路径设置为以前的状态）

GoogleMaps - revert editable polygon to its original state (setting its path to previous state)

google-maps

google-maps-api-3