Ich habe folgendes jsfiddle mit Google Map darauf, aber der Marker ist am unteren Rand des Divs angebracht:
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div class="row">
<div class="col-md-4 col-xs-6 map" id="loc-1">
<div id="map1" class="user_map"></div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
font: 12px sans-serif;
}
h1, p {
margin: 0;
padding: 0;
}
.user_map {
padding-bottom: 58%;
border: 2px solid #9F8F88;
}
JS
var map;
google.maps.event.addDomListener(window, "load", function () {
map = new google.maps.Map(document.getElementById("map1"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
});
//google.maps.event.trigger(map, 'resize');
var geocoder = new google.maps.Geocoder();
var address = "1 Infinite Loop,Cupertino,CA,95014";
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: "{{ location.name }}"
});
marker.setMap(map);
var zoom = map.getZoom();
map.setCenter(results[0].geometry.location, zoom);
}
});
});
Wie kann ich es zentriert machen?
Ich habe festgestellt, dass die padding-bottom -Regel sie direkt beeinflusst. Ist es jedoch möglich, das gewünschte Ergebnis zu erzielen, ohne das CSS zu ändern?
P.s. Ich habe viele verwandte Fragen gesucht, aber es funktioniert in meinem Fall nicht, daher bin ich mir sicher, dass ich etwas vermisse.
3 Antworten
Grundsätzlich ist results[0].geometry.location bereits ein LatLng, Sie können es direkt für setCenter verwenden (entfernen Sie den Parameter zoom -, in v3 erwartet setCenter nur ein einziges Argument) ::
map.setCenter(results[0].geometry.location);
Der Grund, warum es immer noch nicht wie erwartet funktioniert (in der Geige), ist jsFiddle. Sie ändern die Größe der Frames, nachdem die Karte erstellt wurde, aber Ihr Skript hat sie nicht erkannt.
Da dies auch auf Ihrer Seite passieren kann, sollten Sie das resize - Ereignis der Karte zu Beginn des Geokodierungs-Rückrufs auslösen.
Sie müssen eine Höhe für Ihren Kartencontainer festlegen:
.user_map {
height: 300px;
}
Wenn Sie das CSS nicht ändern können, tun Sie dies mit Javascript:
document.getElementById('map1').style.height = '300px';
Sie müssen den Breiten- und Längengrad an eine Funktion in der Google Maps-API übergeben.
Im
map.setCenter();
Du musst bestehen
new google.maps.LatLng(latitude, longitude)
Als ganze Zahlen
Auch an der Position der Marker müssen Sie dasselbe tun