지도에 여러 개의 마커를 설정하고 있으며 확대 / 축소 수준과 중심을 정적으로 설정할 수 있지만 원하는 것은 모든 마커를 표시하고 가능한 모든 시장을 볼 수 있도록 확대 / 축소하는 것입니다.
사용 가능한 방법은 다음과 같습니다
과
나도 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를 호출하기 전에 정의 된 리스너로 Zoom 조작을 수행하는 것이 가장 좋습니다.
감사합니다 @Tim, @ xr280xr, 주제에 대한 더 많은 예 : SO : setzoom-after-fitbounds
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);
}
}
답변
Google Map 개발자 기사MarkerClusterer
에 지정된대로 Google Map에 사용할 수있는 이 클라이언트 측 유틸리티가 있으며 사용법은 다음과 같습니다.
요청한 작업을 수행하는 방법에는 여러 가지가 있습니다.
- 그리드 기반 클러스터링
- 거리 기반 클러스터링
- 뷰포트 마커 관리
- 퓨전 테이블
- 마커 클러스터 러
- 마커 관리자
위의 제공된 링크에서 이에 대해 읽을 수 있습니다.
Marker Clusterer
그리드 기반 클러스터링 을 사용하여 그리드를 원하는 모든 마커를 클러스터링 합니다. 그리드 기반 클러스터링은 맵을 특정 크기의 사각형으로 나누고 (각 줌에서 크기가 변경됨) 마커를 각 그리드 사각형으로 그룹화하여 작동합니다.
나는 이것이 당신이 찾고있는 것이기를 희망하며 이것은 당신의 문제를 해결할 것입니다 🙂