谷歌地图 js API：地图不在引导程序中居中答案

【问题标题】：Google map js API: map is not centered in bootstrap谷歌地图 js API：地图不在引导程序中居中
【发布时间】：2015-08-10 11:29:33
【问题描述】：

我关注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;
}

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 的情况下达到预期的效果？

附：我搜索了很多相关的问题，但在我的情况下它不起作用，所以我很确定，我错过了一些东西。

【问题讨论】：

只需使用map.setCenter(results[0].geometry.location);
没有帮助：jsfiddle.net/dafq8Lx5/6
对我来说，标记位于链接小提琴的中心
在 3 种浏览器中试用过：Chrome、Firefox、Safari。它在底部。发给别人，他也在底部看到了
jsfiddle.net/dafq8Lx5/9

标签： javascript css twitter-bootstrap google-maps google-maps-api-3

【解决方案1】：

基本上results[0].geometry.location已经是LatLng，你可以直接将它用于setCenter（去掉zoom-参数，在v3中setCenter只需要一个参数）：

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

它仍然无法按预期工作的原因（在小提琴中）是 jsFiddle，他们会在创建地图后调整框架的大小，但您的脚本无法识别它。

由于您的页面中也可能发生这种情况，您应该在地理编码回调开始时触发地图的resize-事件。

The final working solution

【讨论】：

【解决方案2】：

您需要为地图容器设置高度：

.user_map {
    height: 300px;
}

如果您无法更改 CSS，请使用 javascript：

document.getElementById('map1').style.height = '300px';

【讨论】：

谢谢，看起来很有希望

【解决方案3】：

您需要将纬度和经度传递给 google maps api 中的函数。

在

map.setCenter();

你需要通过

new google.maps.LatLng(latitude, longitude)

作为整数

在标记的位置你也必须这样做

【讨论】：

没有帮助。根据您的建议更改了marker.setMap(map); 下面的所有内容，但location 属性是同一个 LatLng 对象。
好的，我需要更多信息，在您的代码中，results[0].geometry.location 返回什么