2010-08-21 49 views
8

Vì một số lý do, chức năng getBounds() cho Google Maps v3 dường như đang mở rộng hơn nhiều so với những gì bản đồ thực sự hiển thị. Sửa tôi nếu tôi sai, nhưng không nên trả lại NE (góc trên cùng bên phải) và SW (góc dưới cùng bên trái) vĩ độ và kinh độ cho các góc của những gì đang được hiển thị trong chế độ xem hiện tại?Google Maps v3 getBounds mở rộng ra ngoài những gì hiển thị trên bản đồ

Tôi đang trả lại kết quả tìm kiếm (được ánh xạ bởi một vĩ độ và lng) nằm giữa các tọa độ này và đang được trả về nhiều hơn ngoài khu vực được trả về getBounds(). Bất kỳ ý tưởng về những gì có thể xảy ra ở đây?

Just FYI, tôi nhận được các giới hạn về sự kiện nhàn rỗi của bản đồ:

google.maps.event.addListener(map, 'idle', function() { 

var bounds = map.getBounds(); 
var NE = bounds.getNorthEast(); 
var SW = bounds.getSouthWest(); 

... và sử dụng .lat() và .lng() để có được các tọa độ từ các góc tương ứng. Sau đó, tôi cấp dữ liệu đó cho truy vấn SQL để kiểm tra kết quả giữa các tọa độ đó. Kết quả là trong khu vực chung nhưng có thể rơi xa bên ngoài những gì thực sự được hiển thị trên bản đồ.

Bất kỳ ý tưởng nào được đánh giá cao! Cảm ơn!

+0

LƯU Ý: Điều này thực sự là do lỗi sâu hơn với các điểm đánh dấu nhất định đang hiển thị/không được hiển thị và bị ràng buộc với kết quả tìm kiếm sai. Google, tất nhiên, đã trả lại kết quả chính xác. – Ryan

Trả lời

17

Đúng, map.getBounds() sẽ trả về giới hạn của khu vực có thể xem, như được minh họa trong ví dụ bên dưới. Trong ví dụ này, hộp màu đỏ Polyline được vẽ bằng các điểm map.getBounds() khi sự kiện idle kích hoạt.

Truy vấn SQL của bạn có thể không trả lại kết quả bạn đang tìm kiếm và có thể cần xem xét lại.

<!DOCTYPE html> 
<html> 
<head> 
<title>Bounds Box</title> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> 
<script type="text/javascript"> 
     function initialize() { 

     var latlng = new google.maps.LatLng(30.405865,-87.283362); 
     var myOptions = { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), 
      myOptions); 
     var viewportBox; 

     google.maps.event.addListener(map, 'idle', function(event) { 
      var bounds = map.getBounds(); 

      var ne = bounds.getNorthEast(); 
      var sw = bounds.getSouthWest(); 

      var viewportPoints = [ 
       ne, new google.maps.LatLng(ne.lat(), sw.lng()), 
       sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne 
      ]; 
      /*strokeOpacity = 0 , if don't want to show the border moving. */ 
      if (viewportBox) { 
       viewportBox.setPath(viewportPoints); 
      } else { 
       viewportBox = new google.maps.Polyline({ 
        path: viewportPoints, 
        strokeColor: '#FF0000', 
        strokeOpacity: 1.0, 
        strokeWeight: 4 
       }); 
       viewportBox.setMap(map); 
      }; 

      var info = document.getElementById('info'); 
      info.innerHTML = 'NorthEast: ' + ne.lat() + ' ' + ne.lng() + 
       '<br />' + 'SouthWest: ' + sw.lat() + ' ' + sw.lng(); 
     }); 
     }; 
</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:500px; height:500px"></div> 
    <div id="info"></div> 
</body> 
</html> 
+1

Yup, nó thực sự là một lỗi khác với các điểm đánh dấu khiến tôi bị lẫn lộn. Tốt demo cho thấy giới hạn, cảm ơn. – Ryan

+0

+1 Câu trả lời hay @Eric :) –

+0

@Ryan đã tìm thấy lỗi với các điểm đánh dấu chưa? Im có cùng một vấn đề! –

Các vấn đề liên quan