如何基于 JSON 数组绘制多个多边形答案

【问题标题】：How To Draw Multiple Polygons based on a JSON Array如何基于 JSON 数组绘制多个多边形
【发布时间】：2015-12-15 14:34:01
【问题描述】：

我正在尝试使用 JSON 数组绘制多个多边形。这是我当前的代码。

<script type="text/javascript">
        var map;
        var drawingManager;
        var elements;

        //Overlays
        var polygons = [];
        var polylines = [];
        //JSON String turned into array
        var newPolygons = '<%=request.getAttribute("polygons")%>';
        var editedPolygons = JSON.parse(newPolygons);

        function initialize() {
            //Map
            var mapProp = {
                center: new google.maps.LatLng(14.5667, 120.9927),
                zoom: 18,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

            //Drawing Manager
            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,
                        google.maps.drawing.OverlayType.POLYLINE
                    ]
                }
            });
            drawingManager.setMap(map);

            //Triggers
            google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function (polygon) {
                drawingManager.setDrawingMode(null);
                var polypath = polygon.getPath().getArray();
                polygons.push(polypath);
            }); 
            //Create the Polygons
             var bermudaTriangle = new google.maps.Polygon({
                paths: editedPolygons,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 3,
                fillColor: '#FF0000',
                fillOpacity: 0.35

            });
        }
        //Sends to Servlet
        function sendElements() {
            var elementsJSON = JSON.stringify(polygons);               
            window.location.assign("LoadNextPage?polygons=" + elementsJSON);
        }
    </script>

我使用 servlet 将 elementsJSON 发送到另一个页面，我对其进行编辑，然后通过另一个 servlet 将其发送回主页，并使用 JSON.parse 将其转换回数组。但是无论我做什么，主页都不会显示多边形。我该怎么做？

下面是 newPolygons JSON 字符串的示例：

[[{"H":14.56754606924714,"L":120.99225461483002},{"H":14.567213783453319,"L":120.9916752576828},{"H":14.566736121747363,"L":120.99207758903503}],[{"H":14.566383066777853,"L":120.99221169948578},{"H":14.566325954891425,"L":120.99138557910919},{"H":14.565635419093956,"L":120.9915840625763}]]

但我仍然使用 JSON.parse。

下面是我用于 servlet 的代码，它会引导到第二页：

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    String elementsJSON = (String) request.getParameter("polygons");

    request.setAttribute("polygons", elementsJSON);
    ServletContext context = getServletContext();
    RequestDispatcher dispatch = context.getRequestDispatcher("/second-pageAgain.jsp");

    dispatch.forward(request, response);

}

这是第二页的代码

<script>
        var elementsJSON = '<%=request.getAttribute("polygons")%>';
        var elements;
        function init(){ 
          document.getElementById('savedata').value = elementsJSON;
        }
        function saveChanges(){
            elements = document.getElementById('savedata').value;
            alert(elements);
            window.location.assign("LoadMaps?polygons=" + elements);
        }
    </script>

这是 servlet 的代码，用于返回带有编辑后坐标的主页。

 protected void processRequest(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    String elements = (String) request.getParameter("polygons");
    System.out.println(elements);
    request.setAttribute("polygons", elements);
    ServletContext context = getServletContext();
    RequestDispatcher dispatch = context.getRequestDispatcher("/maps2Again.jsp");
    dispatch.forward(request, response);
}

我正在尝试在地图上绘制我在第二页中编辑的多边形，但我似乎无法让它出现。

【问题讨论】：

看起来您正在使用 API 的未记录属性（“H”、“L”）。不要那样做，这些名称可以而且确实会随着 API 的每个版本（大约每 3 个月）而改变

标签： javascript arrays json google-maps servlets

【解决方案1】：

这对我有用：

for (var i = 0; i < editedPolygons.length; i++) {
    var poly = new google.maps.Polygon({
        path: editedPolygons[i],
        map: map
    });
}

注意：我将您的 JSON 从“H”更改为“lat”，将“L”更改为“lng”以使其成为 google.maps.LatLngLiteral 对象，以便它可以跨 API 版本移植。

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;
var editedPolygons = [
  [{
    "lat": 14.56754606924714,
    "lng": 120.99225461483002
  }, {
    "lat": 14.567213783453319,
    "lng": 120.9916752576828
  }, {
    "lat": 14.566736121747363,
    "lng": 120.99207758903503
  }],
  [{
    "lat": 14.566383066777853,
    "lng": 120.99221169948578
  }, {
    "lat": 14.566325954891425,
    "lng": 120.99138557910919
  }, {
    "lat": 14.565635419093956,
    "lng": 120.9915840625763
  }]
];

var map;
var drawingManager;
var elements;

//Overlays
var polygons = [];
var polylines = [];
//JSON String turned into array
// var newPolygons = '<%=request.getAttribute("polygons")%>';
// var editedPolygons = JSON.parse(newPolygons);

function initialize() {
    //Map
    var mapProp = {
      center: new google.maps.LatLng(14.5667, 120.9927),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    for (var i = 0; i < editedPolygons.length; i++) {
      var poly = new google.maps.Polygon({
        path: editedPolygons[i],
        map: map
      });
    }
    //Drawing Manager
    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,
          google.maps.drawing.OverlayType.POLYLINE
        ]
      }
    });
    drawingManager.setMap(map);

    //Triggers
    google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function(polygon) {
      drawingManager.setDrawingMode(null);
      var polypath = polygon.getPath().getArray();
      polygons.push(polypath);
    });
    //Create the Polygons
    var bermudaTriangle = new google.maps.Polygon({
      paths: editedPolygons,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 3,
      fillColor: '#FF0000',
      fillOpacity: 0.35

    });
  }
  //Sends to Servlet

function sendElements() {
  var elementsJSON = JSON.stringify(polygons);
  window.location.assign("LoadNextPage?polygons=" + elementsJSON);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="googleMap"></div>

【讨论】：