표시되는 모든 마커를 포함하도록 지도 확대/축소 설정

표시되는 모든 마커를 포함하도록 지도 확대/축소 설정

지도에서 여러 마커를 설정하고 있으며 확대/축소 수준과 중심을 정적으로 설정할 수 있지만 원하는 것은 모든 마커를 커버하고 가능한 한 확대/축소하여 모든 시장을 볼 수 있도록 하는 것입니다.

사용 가능한 방법은 다음과 같습니다.

setZoom(zoom:number)

그리고.

setCenter(latlng:LatLng)

둘 다 아니다.setCenter여러 로케이션 또는 로케이션 어레이 입력 지원setZoom이 타입의 기능을 탑재하고 있다

를 사용해야 합니다.fitBounds()방법.

var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
 bounds.extend(markers[i]);
}

map.fitBounds(bounds);

---

developers.google.com/maps/documentation/javascript에서 제공하는 문서:

fitBounds(bounds[, padding])

파라미터:

`bounds`:  [`LatLngBounds`][1]|[`LatLngBoundsLiteral`][1]
`padding` (optional):  number|[`Padding`][1]

반환값: 없음

지정된 경계를 포함하도록 뷰포트를 설정합니다.
주의: 맵이 다음과 같이 설정되어 있는 경우display: none,그fitBounds함수는 맵의 크기를 다음과 같이 읽습니다.0x0에서는 아무것도 하지 않습니다.지도를 숨긴 상태에서 뷰포트를 변경하려면 지도를 다음과 같이 설정합니다.visibility: hidden이를 통해 맵 div의 실제 크기를 확인할 수 있습니다.

몇 가지 유용한 트릭을 사용하여 주어진 답변을 확장하려면:

var markers = //some array;
var bounds = new google.maps.LatLngBounds();
for(i=0;i<markers.length;i++) {
   bounds.extend(markers[i].getPosition());
}

//center the map to a specific spot (city)
map.setCenter(center); 

//center the map to the geometric center of all markers
map.setCenter(bounds.getCenter());

map.fitBounds(bounds);

//remove one zoom level to ensure no marker is on the edge.
map.setZoom(map.getZoom()-1); 

// set a minimum zoom 
// if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if(map.getZoom()> 15){
  map.setZoom(15);
}

//Alternatively this code can be used to set the zoom for just 1 marker and to skip redrawing.
//Note that this will not cover the case if you have 2 markers on the same address.
if(count(markers) == 1){
    map.setMaxZoom(15);
    map.fitBounds(bounds);
    map.setMaxZoom(Null)
}

갱신:
이 토픽의 추가 조사에 따르면 fitBounds()는 비동기이며 Fit Bounds()를 호출하기 전에 정의된 청취자를 사용하여 줌 조작을 수행하는 것이 가장 좋습니다.
@Tim, @xr280xr 감사합니다.다음 토픽에 대한 더 많은 예: setzoom-after-fit-bounds

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
  this.setZoom(map.getZoom()-1);

  if (this.getZoom() > 15) {
    this.setZoom(15);
  }
});
map.fitBounds(bounds);

어레이 크기는 0보다 커야 합니다.그렇지 않으면 예기치 않은 결과가 발생합니다.

function zoomeExtends(){
  var bounds = new google.maps.LatLngBounds();
  if (markers.length>0) { 
      for (var i = 0; i < markers.length; i++) {
         bounds.extend(markers[i].getPosition());
        }    
        myMap.fitBounds(bounds);
    }
}

이거 있어요MarkerClustererGoogle Map 개발자 문서에 명시된 대로 Google Map에서 사용할 수 있는 클라이언트 측 유틸리티는 다음과 같습니다. 사용 방법은 다음과 같습니다.

요청하신 작업을 수행하는 방법에는 다음과 같은 여러 가지가 있습니다.

• 그리드 기반 클러스터링
• 거리 기반 클러스터링
• 뷰포트 마커 관리
• 퓨전 테이블
• 마커 클러스터링러
• 마커 매니저

위의 링크에서 해당 정보를 볼 수 있습니다.

Marker Clusterer 그리드 기반 클러스터링을 사용하여 그리드를 원하는 모든 마커를 클러스터화합니다.그리드 기반 클러스터링은 맵을 특정 크기의 정사각형(줌마다 크기가 변경됨)으로 나눈 다음 마커를 각 그리드 정사각형으로 그룹화하는 방식으로 작동합니다.

클러스터링 전

클러스터링 후

이것이 당신이 찾고 있던 것이기를 바라며, 이것으로 당신의 문제가 해결되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/19304574/center-set-zoom-of-map-to-cover-all-visible-markers