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

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

.user_map {
    height: 300px;
}

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

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

Answer 2

基本上results[0].geometry.location已经是LatLng，您可以直接将其用于setCenter（删除zoom - 参数，在v3中setCenter只需要{}单一论点）：

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

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

由于这可能会在您的网页中发生，因此您应该在地理编码回调开始时触发地图的resize - 事件。

The final working solution

Answer 3

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

in

map.setCenter();

你需要通过

new google.maps.LatLng(latitude, longitude)

作为整数

同样在标记的位置你必须做同样的

Google map js API：地图不在引导程序

3 个答案: