Làm cách nào để Google Maps hiển thị toàn bộ đa giác?

Question

Tôi có một bộ đối tượng GPolygon được đính kèm với các đối tượng trong mô hình miền của tôi và được thêm vào bản đồ trên trang của tôi. Các đối tượng miền đang được hiển thị trong danh sách trên cùng một trang và khi người dùng nhấp vào một trong số họ, tôi muốn hiển thị đa giác được liên kết.

Tôi muốn toàn bộ đa giác được hiển thị và lý tưởng tôi muốn bản đồ được căn giữa trên trung tâm đa giác.

Tôi đã hy vọng rằng sẽ có một cuộc gọi bản đồ API dọc theo dòng của ...

myMap.makeSureYouCanSeeAllThisPolygon(aPolygon); 

nhưng tôi đã không thể tìm thấy một.

Nếu tôi phải thực hiện việc này theo cách thủ công, thì tôi có thể dễ dàng tìm ra cách định tâm một cách dễ dàng, nhưng làm cách nào để tìm ra mức thu phóng?

Answer 1

Bạn có thể lấy điểm trung tâm của đa giác bằng cách sử dụng aPolygon.getBounds().getCenter(); và sau đó sử dụng GLatLng được trả lại bằng phương pháp myMap.setCenter().

Để có mức thu phóng, bạn có thể sử dụng myMap.getBoundsZoomLevel(aPolygon.getBounds()); sau đó sử dụng phương thức này với phương thức myMap.setZoom().

Answer 2

API Google Maps v3 không hỗ trợ phương thức getBounds() cho lớp google.maps.Polygon. Điều này có vẻ lạ vì thực tế là lớp google.maps.Map có phương thức fitBounds(), chính xác là những gì bạn đang tìm kiếm .. Nếu bạn sử dụng API Google Maps với bất kỳ loại tần suất nào thì điều này sẽ nằm trong túi của bạn thủ thuật ::

getBounds() phương pháp cho lớp google.maps.Polygon

google.maps.Polygon.prototype.getBounds = function() { 
    var bounds = new google.maps.LatLngBounds(); 
    var paths = this.getPaths(); 
    var path;   
    for (var i = 0; i < paths.getLength(); i++) { 
     path = paths.getAt(i); 
     for (var ii = 0; ii < path.getLength(); ii++) { 
      bounds.extend(path.getAt(ii)); 
     } 
    } 
    return bounds; 
} 

có phương pháp này trên tay làm cho nó rất đơn giản để tập trung và phù hợp với một đa giác trên bản đồ.

Lưu ý: Nếu bạn không quen thuộc với getAt() và getLength() thì tốt, chúng là phương pháp duy nhất cho lớp google.maps.MVCArray. Khi bạn gọi phương thức getPaths() của đa giác, nó sẽ trả về mảng của bạn LatLng là một MVCArray có thể thay đổi của LatLng's .. bạn có thể sẵn sàng về MVCArrays tại đây - Google Maps v3 API MVCArray class.

Tiếp tục. Đây là khung công tác, bạn sẽ phải triển khai phương pháp prototyped ở trên một nơi nào đó trước mã bit tiếp theo này.

var map = new google.maps.Map(container, opts); // I'll spare the details on this 

var coords = [ 
    new google.maps.LatLng(25.774252, -80.190262) 
    ,new google.maps.LatLng(18.466465, -66.118292) 
    ,new google.maps.LatLng(32.321384, -64.75737) 
    ,new google.maps.LatLng(25.774252, -80.190262) 
]; 

var myPolygon = new google.maps.Polygon({ 
    paths: coords 
    ,strokeColor: "#A80000" 
    ,strokeOpacity: 0.8 
    ,strokeWeight: 1 
    ,fillColor: "#0b2a32" 
    ,fillOpacity: 0.12 
}); 

Với các thiết lập sân khấu, tất cả các bạn sẽ phải làm gì để tâm và phóng to về vấn đề này (hoặc bất kỳ) đa giác là ::

map.fitBounds(myPolygon.getBounds()); 

ngắn và ngọt ngào. Hy vọng rằng sẽ giúp.

-Kevin James

Answer 3

Giải pháp này làm việc cho đa giác tôi đã thêm thành công vào bản đồ. Thêm phương thức getBounds() cho lớp google.maps.Polygon và sau đó sử dụng map.fitBounds (myPolygon.getBounds());

Answer 4

nghĩ anh ấy ment:

map.fitBounds(myPolygon.my_getBounds()); 

một công trình xử.

Answer 5

Tôi đã viết một chức năng để thêm vào giải pháp Kevin James. phải mất một mảng đa giác và nhận được giới hạn cho tất cả các đa giác bạn có thể có trên bản đồ của bạn. bạn chỉ cần đẩy chúng vào một mảng và sau đó bạn có thể gọi chức năng của tôi để tự động phóng to bản đồ.

function getArrayBounds(polyArray){ 
    var bounds = new google.maps.LatLngBounds(); 
    var path, paths; 
    for(var polys = 0; polys < polyArray.length; polys++) { 
     paths = polyArray[polys].getPaths();  
     for (var i = 0; i < paths.getLength(); i++) { 
      path = paths.getAt(i); 
      for (var ii = 0; ii < path.getLength(); ii++) { 
       bounds.extend(path.getAt(ii)); 
      } 
     } 
    } 
    return bounds; 
}