我有以下jsfiddle上面有谷歌地图,但标记粘在 div 的底部:
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);
}
});
});
如何使其居中?
我注意到, padding-bottom
规则直接影响它,但是是否可以在不更改 CSS 的情况下实现所需的结果?
P.s.我搜索了很多相关问题,但它不适用于我的情况,所以我清楚地确定,我错过了一些东西。
最佳答案
基本上results[0].geometry.location
已经是一个LatLng
,你可以直接用它来setCenter
(去掉 >zoom
-参数,在 v3 setCenter
中只需要一个参数):
map.setCenter(results[0].geometry.location);
它仍然无法按预期工作(在 fiddle 中)的原因是jsFiddle,它们会在创建 map 后调整框架大小,但您的脚本无法识别它。
由于这种情况也可能发生在您的页面中,因此您应该在地理编码回调开始时触发 map 的调整大小
事件。
关于javascript - 谷歌地图js API : map is not centered in bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31918376/