js傳數組到java後臺使用Json轉換 （高德地圖多邊形覆蓋物顯示）

前臺使用高德地圖繪製面

<div id="container"></div>
<div class="button-group">
    <input type="button" class="button" value="鼠標繪製面" id="polygon"/>
    <input type="button" class="button" value="保存"  onclick="save()"/>
</div>
<script>
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13,
        center: [108.82988, 34.267431]
    });
    //在地圖中添加MouseTool插件
    var dspath = [];
    var mouseTool = new AMap.MouseTool(map);
    AMap.event.addDomListener(document.getElementById('polygon'), 'click', function () {
        mouseTool.polygon({
            strokeColor: 'red',
            strokeOpacity: 0.8,//輪廓線透明度，取值範圍[0,1]，0表示完全透明，1表示不透明。默認爲0.9
            strokeWeight: 1,   // 輪廓線寬度
            fillColor: '#fff9f8',//多邊形填充顏色，使用16進制顏色代碼賦值，如：#FFAA00
            fillOpacity: 0.6   // 多邊形填充透明度，取值範圍[0,1]，0表示完全透明，1表示不透明。默認爲0.9
        });
    }, false);
    AMap.event.addListener(mouseTool, 'draw', function(e) { //添加事件
        console.log("ggggg==" + e.obj.getPath());//獲取經緯度值
        var path = e.obj.getPath();

        for (var i in path){
            dspath.push({"lng":path[i].getLng(),"lat":path[i].getLat()});
            //dpath.push([path[i].getLng(),path[i].getLat()]);
        }
        console.log(dspath);

    });
function  save() {
    $.ajax({
        type : 'get',
        url :getContextPath() + "/gmap/savePath",
        data:{"dpath":JSON.stringify(dspath)},  // 對象參數轉換json格式字符串
        contentType: "application/x-www-form-urlencoded",
        dataType:'json',
        success : function(data) {
     if (data) {
         alert(data);
      
  
     } else {
        alert("失敗");
     }
     }
     });
}

</script>

後臺接收

@RequestMapping(value = "/savePath")
public void savePath(HttpServletRequest request, HttpServletResponse response) {
    try {
        request.setCharacterEncoding("utf-8");
        String path = request.getParameter("dpath");
        JSONObject json = new JSONObject();
        list =(List<Map<String,Integer>>) json.parse(path);
          
          System.out.println("list========"+list.toString());
        response.getWriter().write(json.toJSONString(true));
    } catch (IOException e) {
        e.printStackTrace();
    }
}

高德地圖多邊形覆蓋物顯示

<script>
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13,
        center: [108.82988, 34.267431]
    });
    var polygonArr=new Array();//多邊形覆蓋物節點座標數組

        polygonArr.push(new AMap.LngLat(lng,lat));

map.on('complete', function() { var polygon = new AMap.Polygon({ strokeColor: 'red', strokeOpacity: 0.8,//輪廓線透明度，取值範圍[0,1]，0表示完全透明，1表示不透明。默認爲0.9 strokeWeight: 1, // 輪廓線寬度 fillColor: '#fff9f8',//多邊形填充顏色，使用16進制顏色代碼賦值，如：#FFAA00 fillOpacity: 0.6, // 多邊形填充透明度，取值範圍[0,1]，0表示完全透明，1表示不透明。默認爲0.9 path:polygonArr } ); polygon.setMap(map); });</script>