sự kiện sau khi sửa đổi đa giác trong bản đồ google api v3

Question

Tôi đã tạo một ứng dụng bản đồ sử dụng trình quản lý bản vẽ (và thực hiện các hình dạng có thể chọn); Chương trình hoạt động như sau: khi vẽ xong đa giác sau khi nhấp vào nút một đường dẫn, được ánh xạ trên đa giác.

Khi đa giác được chỉnh sửa sau quá trình này, tôi muốn hàm ánh xạ được gọi lại. Tuy nhiên tôi không thể làm việc này;

Tôi đã thử sử dụng mã sau nhưng tôi luôn gặp lỗi vì chưa có hình dạng nào được chọn khi người nghe này được thêm vào. Tôi có thể làm gì?

google.maps.event.addListener(selectedShape, 'set_at', function() { 
    console.log("test"); 
}); 

google.maps.event.addListener(selectedShape, 'insert_at', function() { 
    console.log("test"); 
}); 

mảnh quan trọng của mã:

function showDrawingManager(){ 
    var managerOptions = { 
     drawingControl: true, 
     drawingControlOptions: { 
      position: google.maps.ControlPosition.TOP_CENTER, 
      drawingModes: [google.maps.drawing.OverlayType.MARKER,google.maps.drawing.OverlayType.POLYLINE,google.maps.drawing.OverlayType.POLYGON] 
     }, 
     markerOptions: { 
      editable: true, 
      icon : '/largeTDGreenIcons/blank.png' 
     }, 
     polygonOptions: { 
      fillColor:"#1E90FF", 
      strokeColor:"#1E90FF", 
     }, 
     polylineOptions: { 
      strokeColor:"#FF273A" 
     } 
    } 

    var drawingManager = new google.maps.drawing.DrawingManager(managerOptions); 
    drawingManager.setMap(map); 
    return drawingManager; 
} 

    function clearSelection() { 
     if (selectedShape) { 
      console.log("clearSelection"); 

      selectedShape.setEditable(false); 
      selectedShape = null; 
      numberOfShapes--; 
     } 
} 

function setSelection(shape) { 
     console.log("setSelection"); 

    clearSelection(); 
    selectedShape = shape; 
    shape.setEditable(true); 
     numberOfShapes++; 
     //getInformation(shape); 
} 

function initialize(){ 
//.... 
var drawingManager = showDrawingManager(); 
     google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { 
      if (e.type != google.maps.drawing.OverlayType.MARKER) { 
      // Switch back to non-drawing mode after drawing a shape. 
      drawingManager.setDrawingMode(null); 

      // Add an event listener that selects the newly-drawn shape when the user 
      // mouses down on it. 
      var newShape = e.overlay; 
      newShape.type = e.type; 
      google.maps.event.addListener(newShape, 'click', function() { 
       setSelection(newShape); 
      }); 
      setSelection(newShape); 
      } 
     }); 

Answer 1

Tôi giải quyết nó bằng cách gọi .getPath() và đưa người nghe bên trong người nghe được gọi mỗi khi một hình dạng được nhấp. Tôi nghĩ rằng các tài liệu hướng dẫn google api không phải là rất rõ ràng về cách sử dụng set_at vì vậy nó có thể hữu ích cho những người khác quá.

// Add an event listener that selects the newly-drawn shape when the user 
    // mouses down on it. 
    var newShape = e.overlay; 
    newShape.type = e.type; 
    google.maps.event.addListener(newShape, 'click', function() { 
     google.maps.event.addListener(newShape.getPath(), 'set_at', function() { 
      console.log("test"); 
     }); 

     google.maps.event.addListener(newShape.getPath(), 'insert_at', function() { 
      console.log("test"); 
     }); 
     setSelection(newShape); 
    }); 

Answer 2

google.maps.event.addListener(yourPolygon.getPath(), 'insert_at', function(index, obj) { 
      //polygon object: yourPolygon 
    }); 
    google.maps.event.addListener(yourPolygon.getPath(), 'set_at', function(index, obj) { 
      //polygon object: yourPolygon 
    }); 

Đoạn mã trên đang làm việc cho tôi. Trường hợp set_at được kích hoạt khi chúng tôi sửa đổi khu vực đa giác từ một chấm được đánh dấu (cạnh) và insert_at được kích hoạt khi chúng tôi kéo điểm nằm giữa các cạnh được đánh dấu. Tôi đã sử dụng chúng trong sự kiện polygoncomplete và sau khi tải đa giác từ cơ sở dữ liệu. Làm việc tốt cho họ

Answer 3

Để tránh các vấn đề được đề cập với set_at và kéo, tôi đã thêm phần sau, điều này sẽ vô hiệu hóa sự kiện phát sóng cho set_at khi kéo bản vẽ. Tôi tạo ra một lớp mở rộng lớp đa giác, và bổ sung phương pháp này:

ExtDrawingPolygon.prototype.enableCoordinatesChangedEvent = function(){ 
    var me = this, 
     superClass = me.superClass, 
     isBeingDragged = false, 
     triggerCoordinatesChanged = function(){ 
     //broadcast normalized event 
     google.maps.event.trigger(superClass,'coordinates_changed'); 
     }; 

    //if the overlay is being dragged, set_at gets called repeatedly, so either we can debounce that or igore while dragging, ignoring is more efficient 
    google.maps.event.addListener(superClass,'dragstart',function(){ 
    isBeingDragged = true; 
    }); 

    //if the overlay is dragged 
    google.maps.event.addListener(superClass,'dragend',function(){ 
    triggerCoordinatesChanged(); 
    isBeingDragged = false; 
    }); 

    //or vertices are added to any of the possible paths, or deleted 
    var paths = superClass.getPaths(); 
    paths.forEach(function(path,i){ 
    google.maps.event.addListener(path,"insert_at",function(){ 
     triggerCoordinatesChanged(); 
    }); 
    google.maps.event.addListener(path,"set_at",function(){ 
     if(!isBeingDragged){ 
     triggerCoordinatesChanged(); 
     } 
    }); 
    google.maps.event.addListener(path,"remove_at",function(){ 
     triggerCoordinatesChanged(); 
    }); 
    }); 

}; 

Nó bổ sung thêm một "coordinates_changed" sự kiện để đa giác bản thân, do đó, mã khác chỉ có thể nghe for a nice, duy nhất, đơn giản hóa event-

Answer 4

chrismarx theo bài đăng của bạn bên dưới là ví dụ về cách sử dụng sự kiện mới trên bản ghi. Tôi đã thực hiện thay đổi nhỏ trong việc loại bỏ siêu lớp và thay đổi các tham chiếu thành "tôi" vì đã xảy ra sự cố với tham chiếu chưa được xác định.

Ở phía trên của tập tin của bạn hoặc tập tin cấu hình toàn cầu, vv sử dụng:

declare global { 
    module google.maps { 
     interface Polygon { 
      enableCoordinatesChangedEvent(); 
     } 
    } 
} 

Sau đó, xác định phần mở rộng:

google.maps.Polygon.prototype.enableCoordinatesChangedEvent = function() { 
      var me = this, 
      isBeingDragged = false, 
      triggerCoordinatesChanged = function() { 
       //broadcast normalized event 
       google.maps.event.trigger(me, 'coordinates_changed'); 
      }; 

     //if the overlay is being dragged, set_at gets called repeatedly, so either we can debounce that or igore while dragging, ignoring is more efficient 
     google.maps.event.addListener(me, 'dragstart', function() { 
      isBeingDragged = true; 
     }); 

     //if the overlay is dragged 
     google.maps.event.addListener(me, 'dragend', function() { 
      triggerCoordinatesChanged(); 
      isBeingDragged = false; 
     }); 

     //or vertices are added to any of the possible paths, or deleted 
     var paths = me.getPaths(); 
     paths.forEach(function (path, i) { 
      google.maps.event.addListener(path, "insert_at", function() { 
       triggerCoordinatesChanged(); 
      }); 
      google.maps.event.addListener(path, "set_at", function() { 
       if (!isBeingDragged) { 
        triggerCoordinatesChanged(); 
       } 
      }); 
      google.maps.event.addListener(path, "remove_at", function() { 
       triggerCoordinatesChanged(); 
      }); 
     }); 

    }; 

Cuối cùng gọi mở rộng và thêm người nghe:

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) { 
     event.overlay.enableCoordinatesChangedEvent(); 

     google.maps.event.addListener(event.overlay, 'coordinates_changed', function (index, obj) { 
      //polygon object: yourPolygon 
      console.log('coordinates_changed'); 
     }); 

    });