高德地图--矩形的编辑

在高德地图的多边形编辑中，可以通过拖拽在地图上生成圆，多边形，折线等，并且可以得出圆心、多边形顶点坐标等信息，但不能编辑矩形。我们利用高德地图api中的折线（AMap.Polyline）来编辑矩形。

//首先定义矩形的初始位置坐标
 var arr = [
      [115.724036,36.786033],
      [115.775203,36.786033], 
      [115.775203,36.714376],
      [115.724036,36.714376],
      [115.724036,36.786033]

   ];
   
   function squdrag(){
//利用AMap.Polyline绘制矩形
     var polyline = new AMap.Polyline({
        map:map,
        path:arr,
        strokeColor: "#0000ff",
        strokeWeight:3,
        lineJoin:"round"
     });
//矩形左上角
     var marker1 =new AMap.Marker({
          map:map,
          icon:"http://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png",
          position:arr[0],
          draggable:true
        });
//矩形右下角
        var marker2 = new AMap.Marker({
          map:map,
          icon:"http://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png",
          position:arr[2],
          draggable:true
        });
//矩形顶点可拖拽，随意变大变小
      AMap.event.addListener(marker1,'dragend',function(data){
            var lng = data.lnglat.lng;
            var lat = data.lnglat.lat;

            marker1.setPosition(new AMap.LngLat(lng,lat));
             $('.posmsg_squ .pos .ltlng').html(lng);
           $('.posmsg_squ .pos .ltlat').html(lat);        
              polyline.setMap(null);
              arr.splice(0,1,[data.lnglat.lng,data.lnglat.lat]);  
              arr.splice(1,1,[arr[2].lng,data.lnglat.lat]);
              arr.splice(3,1,[data.lnglat.lng,arr[2].lat]);
              arr.splice(4,1,[data.lnglat.lng,data.lnglat.lat]);
           
          try{
            polyline = new AMap.Polyline({
              map:map,
              path:arr,
              strokeColor: "#0000ff",
                strokeWeight:3,
                lineJoin:"round"
            });
       
          }catch(e){
            if(e.message==undefined){
              arr.splice(1,1,[arr[2].lng,data.lnglat.lat]);
              arr.splice(3,1,[data.lnglat.lng,arr[2].lat]);

               polyline = new AMap.Polyline({
                  map:map,
                  path:arr,
                  strokeColor: "#0000ff",
                  strokeWeight:3,
                  lineJoin:"round"
              });
            }
          }
          
  
        });
//矩形顶点可拖拽，随意变大变小
        AMap.event.addListener(marker2,'dragend',function(data){
          var lng = data.lnglat.lng;
          var lat = data.lnglat.lat;
          marker2.setPosition(new AMap.LngLat(lng,lat));
       
          $('.posmsg_squ .pos .rblng').html(lng);
          $('.posmsg_squ .pos .rblat').html(lat);
		//每次拖拽清空地图
          polyline.setMap(null);
          arr.splice(2,1,[data.lnglat.lng,data.lnglat.lat]);
          arr.splice(1,1,[data.lnglat.lng,arr[0].lat]);
          arr.splice(3,1,[arr[0].lng,data.lnglat.lat]);

          try {
            polyline = new AMap.Polyline({
              map:map,
              path:arr,
              strokeColor: "#0000ff",
              strokeWeight:3,
              lineJoin:"round"
            });

          }catch(e){

            if(e.message==undefined){
              arr.splice(1,1,[data.lnglat.lng,arr[0].lat]);
              arr.splice(3,1,[arr[0].lng,data.lnglat.lat]);

              polyline = new AMap.Polyline({
                  map:map,
                  path:arr,
                  strokeColor: "#0000ff",
                  strokeWeight:3,
                  lineJoin:"round"
              });
            }
          }

        });
      }