0
我想繪製使用JSON數組的多個多邊形。這是我目前的代碼。如何繪製基於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);
}
我試圖繪製多邊形，我在第二個頁面進行編輯，在地圖上，但我似乎無法使其出現。
你可以提供一個[最小的，完整的，經過測試和讀示例]（http://stackoverflow.com/help/mcve），它演示了這個問題，包括所需JSON的樣本。 – geocodezip
@geocodezip我按照要求做了。 :) –
看起來您正在使用API的未公開屬性（「H」，「L」）。不要這樣做，這些名稱可以隨API的每次發佈而改變（大約每3個月） – geocodezip