我尝试使用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 String的示例:
[[{"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);
}
我试图在地图上绘制我在第二页编辑的多边形,但我似乎无法让它出现。
答案 0 :(得分:0)
这对我有用:
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版本中移植。
代码段
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"></script>
<div id="googleMap"></div>