Inclure des info-infoousses ouvertes dans les limites de la carte, lors de l'utilisation de Fitbounds
-
20-12-2019 - |
Question
J'ai une carte contenant plusieurs marqueurs avec des infoWindows.Les infoWindows doivent être ouvertes sur la charge de la page.La carte est en train d'être centrée à l'aide de Setbounds pour incorporer tous les marqueurs, qui fonctionne, mais il doit également inclure les infoousses dans les limites.Actuellement, les infoousses sont recadrées dans des endroits.
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; }
Vous pouvez voir un violon ici: http://jsfiddle.net/mkkvm/
Quelqu'un peut-il suggérer comment obtenir les InfoWindows à l'intérieur des limites?
La solution
Preuve de concept Jsfiddle
- Affiche la carte normalement
- Calculez la distance de pixels de l'ancre de marqueur vers le bord supérieur de l'info-infoWowow
- Calculez la distance de pixels de l'ancre de marqueur vers le bord gauche de l'infoWindow
- Calculez la distance de pixels de l'ancre de marqueur vers le bord droit de l'info-infoWowow
- Étendez les limites d'origine avec deux points à base de coin droit des limites plus la moitié de la largeur de l'info-info-info-info-annonce et le haut des limites, ainsi que la hauteur de l'info-info-info-annonce.
- Étendez les limites d'origine avec deux points fabriqués à partir du coin gauche des limites moins la moitié de la largeur de l'info-infooussionnaire et du haut des limites plus la hauteur de l'info-infooussionnaire.
- correspond à la carte aux nouvelles limites.
Peut probablement être affiné d'utiliser 3 points de centre supérieur, centre gauche et centre droit, il s'agit d'une première coupe, une preuve de concept, peut probablement être nettoyée et raffinée.
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);