FITBounds를 사용할 때지도의 경계 내에서 열린 InfoWindows 포함
-
20-12-2019 - |
문제
INFOWINDOWS가있는 여러 마커가 포함 된지도가 있습니다.infoWindows는 페이지로드에서 열려 있어야합니다.지도는 SetBounds를 사용하여 모든 마커를 사용하여 작동하는 모든 마커를 통합하지만 경계 내에 InfoWindows를 포함시켜야합니다.현재 InfoWindows가 자리에 자른다.
js :
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'));
var bounds = new google.maps.LatLngBounds();
var myLatlng1 = new google.maps.LatLng(51.525209,-0.09402479999994284)
var contentString1 = '<div class="map-content"><p>Test1<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf</p></div>'
var infowindow1 = new google.maps.InfoWindow({content: contentString1});
var marker1 = new google.maps.Marker({position: myLatlng1,map: map,title: 'Test1'});
google.maps.event.addListener(marker1, 'click', function() {infowindow1.open(map,marker1);});
infowindow1.open(map,marker1);
bounds.extend(myLatlng1);
var myLatlng2 = new google.maps.LatLng(51.52106840183588,-0.10866641049801729)
var contentString2 = '<div class="map-content"><p><br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf<br/ >dsfasdf</p></div>'
var infowindow2 = new google.maps.InfoWindow({content: contentString2});
var marker2 = new google.maps.Marker({position: myLatlng2,map: map,title: 'Test2'});
google.maps.event.addListener(marker2, 'click', function() {infowindow2.open(map,marker2);});
infowindow2.open(map,marker2);
bounds.extend(myLatlng2)
// Fit these bounds to the map
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
.
CSS :
#map-canvas { width: 100%; height: 520px; }
.
여기를 볼 수 있습니다 : http://jsfiddle.net/mkkvm/ 누구든지 경계 내부에서 InfoWindows를 얻는 방법을 제안 할 수 있습니까?
해결책
개념 증명 jsfiddle
- 맵을 정상적으로 표시
- 마커 앵커에서 픽셀 거리를 InfoWindow 의 상단 가장자리로 계산합니다.
- 마커 앵커에서 픽셀 거리를 InfoWindow 의 왼쪽 가장자리로 계산합니다.
- 마커 앵커에서 픽셀 거리를 InfoWindow 의 오른쪽 가장자리로 계산합니다.
- 경계의 오른쪽 모서리에서 만든 두 점으로 원래의 경계를 확장하고 InfoWindow의 너비와 경계의 맨 +의 높이와
- 경계의 왼쪽 모서리에서 만든 두 점으로 원래의 경계를 확장합니다. in InfoWindow의 너비와 경계의 맨 위에 infoWindow의 높이와 경계의 높이가 더 웁니다.
- 새로운 경계에지도를 맞추십시오.
아마도 3 점, 왼쪽 센터 및 오른쪽 센터를 사용하기 위해 세련 될 수 있습니다. 이것은 첫 번째 컷, 개념 증명, 아마도 정제 될 수 있습니다.
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'));
var projection = null;
google.maps.event.addListener(map,'projection_changed', function() {
projection = map.getProjection();
});
var bounds = new google.maps.LatLngBounds();
if (!projection)
google.maps.event.addListener(map, 'idle', computeBounds);
else
computeBounds();
var myLatlng1 = new google.maps.LatLng(51.525209,-0.09402479999994284);
bounds.extend(myLatlng1);
var myLatlng2 = new google.maps.LatLng(51.52106840183588,-0.10866641049801729);
bounds.extend(myLatlng2);
// Fit these bounds to the map
map.fitBounds(bounds);
function computeBounds() {
var contentString1 = '<div class="map-content"><p>Test1<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf</p></div>'
var infowindow1 = new google.maps.InfoWindow({content: contentString1});
var marker1 = new google.maps.Marker({position: myLatlng1,map: map,title: 'Test1'});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
infowindow1.open(map,marker1);
google.maps.event.addListenerOnce(infowindow1,'domready',calcInfoWindowBounds);
var contentString2 = '<div class="map-content"><p><br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf<br />dsfasdf</p></div>'
var infowindow2 = new google.maps.InfoWindow({content: contentString2});
var marker2 = new google.maps.Marker({position: myLatlng2,map: map,title: 'Test2'});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});
infowindow2.open(map,marker2);
google.maps.event.addListenerOnce(infowindow2,'domready',calcInfoWindowBounds);
function calcInfoWindowBounds(){
domEls = document.getElementsByClassName('map-content');
var markerSpace = 32+8;
var maxTop = 0;
var maxLeft = 0;
var maxRight = 0;
for (var i=0; i<domEls.length; i++) {
var topOfWindow = domEls[i].offsetHeight + markerSpace;
var leftOfWindow = domEls[i].offsetWidth/2;
var rightOfWindow = domEls[i].offsetWidth/2;
if (topOfWindow > maxTop) maxTop = topOfWindow;
if (leftOfWindow > maxLeft) maxLeft = leftOfWindow;
if (rightOfWindow > maxRight) maxRight = rightOfWindow;
}
var leftBounds = projection.fromLatLngToPoint(new google.maps.LatLng(bounds.getNorthEast().lat(),bounds.getSouththWest().lng()));
var rightBounds = projection.fromLatLngToPoint(new google.maps.LatLng(bounds.getNorthEast()));
var topBounds0 = rightBounds.y + maxTop;
var rightBounds0 = rightBounds.x + maxRight;
var leftBounds0 = leftBounds.x - maxLeft;
bounds.extend(projection.fromPointToLatLng(leftBounds0,topBounds0));
bounds.extend(projection.fromPointToLatLng(rightBounds0,topBounds0));
map.fitBounds(bounds);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
.제휴하지 않습니다 StackOverflow