Includere Infowindows aperto entro limiti della mappa, quando si utilizza FotTounds
-
20-12-2019 - |
Domanda
Ho una mappa che contiene più marcatori con Infowindows.Gli Infowindows devono essere aperti sul carico della pagina.La mappa viene centrata utilizzando SETWounds per incorporare tutti i marker, che funziona, ma deve anche includere gli infowindows all'interno dei limiti.Attualmente gli infowindows sono ritagliati in posti.
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; }
.
Puoi vedere un violino qui: http://jsfiddle.net/mkkvm/ Qualcuno può suggerire come ottenere gli infowindows all'interno dei limiti?
Soluzione
PROVA DEL CONCETTO jsfiddle
- .
- Visualizza la mappa normalmente
- Calcola la distanza del pixel dall'ancora del marker al bordo superiore dell'infowindow
- Calcola la distanza del pixel dall'ancora del marker al bordo sinistro dell'infowindow
- Calcola la distanza del pixel dall'ancora del marker al bordo destro dell'infowindow
- Estendi i limiti originali con due punti realizzati dall'angolo destro dei limiti più metà della larghezza dell'infowindow e la parte superiore dei limiti più l'altezza dell'infowdow.
- Estendi i limiti originali con due punti realizzati dall'angolo sinistro dei limiti meno la metà della larghezza dell'infowindow e la parte superiore dei limiti più l'altezza dell'infowdodow.
- Montare la mappa per i nuovi limiti.
Probabilmente può essere raffinato per utilizzare 3 punti Top Center, centro sinistra e centro destro, questo è un primo taglio, prova del concetto, può probabilmente essere ripulito e raffinato.
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);
.Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow