javascript - 谷歌地图js API : map is not centered in bootstrap

Question

我有以下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&amp;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.我搜索了很多相关问题，但它不适用于我的情况，所以我清楚地确定，我错过了一些东西。

Answer 1

基本上results[0].geometry.location已经是一个LatLng，你可以直接用它来setCenter(去掉 >zoom-参数，在 v3 setCenter 中只需要一个参数):

 map.setCenter(results[0].geometry.location);

它仍然无法按预期工作(在 fiddle 中)的原因是jsFiddle，它们会在创建 map 后调整框架大小，但您的脚本无法识别它。

由于这种情况也可能发生在您的页面中，因此您应该在地理编码回调开始时触发 map 的调整大小事件。

The final working solution