2010-08-21 1 views
8

Google지도 v3의 getBounds() 기능이지도가 실제로 보여주는 것보다 훨씬 더 확장되는 것처럼 보입니다. 내가 틀렸다면 나를 정정하십시오. 그러나 NE (오른쪽 위 모서리)와 SW (왼쪽 아래 모서리) 위도와 경도는 현재보기에 표시되는 부분의 가장 자리에 대해 반환하지 않아야합니까?Google지도 v3 getBounds가지도에서 볼 수있는 것 이상으로 확장되었습니다

나는이 좌표 사이에있는 검색 결과 (위도와 경도로 매핑 됨)를 반환하고 getBounds()에 의해 반환 된 영역 바깥에서 훨씬 더 많은 결과가 반환됩니다. 여기에 무슨 일이 일어날 지에 대한 아이디어가 있습니까?

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

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

을 ... 그리고 각 모서리의 좌표를 얻을 수 .lat()와 .lng()를 사용하여 :

그냥 참고로, 나는지도의 유휴 이벤트에 경계를 얻고있다. 그런 다음 그 좌표 사이의 결과를 확인하는 SQL 쿼리로 피드를 보냅니다. 결과는 일반 영역에 있지만지도에 실제로 표시되는 범위를 벗어날 수 있습니다.

모든 아이디어를 높이 평가합니다! 감사!

+0

참고 : 실제로 표시/보이지 않는 특정 마커 및 잘못된 검색 결과와 연결된 더 심각한 버그가 있습니다. 구글은 물론 정확한 결과를 내고 있었다. – Ryan

답변

17

올바른 경우 map.getBounds()은 아래 예제와 같이 표시 가능 영역의 경계를 반환합니다. 이 예제에서는 idle 이벤트가 발생할 때 map.getBounds()의 점을 사용하여 빨간색 Polyline 상자가 그려집니다.

SQL 쿼리가 찾고있는 결과를 반환하지 않을 수 있으며 다시보아야 할 수 있습니다.

<!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

그래, 실제로 나를 섞어 버리는 마커가있는 다른 버그 였어. 범위를 보여주는 좋은 데모, 감사합니다. – Ryan

+0

+1 좋은 답변 @Eric :) –

+0

@ 라이언 마커가있는 버그를 찾았습니까? 나는 똑같은 문제를 겪고있다! –