Question

我创建了一个包含谷歌地图的页面，它显示了一般位置，但不是以标记为中心。我已经完成了几个教程，问题仍然存在。我在内联和样式表上调整#map容器div的大小，并得到相同的结果。我使用twitter bootstrap来设置我的页面样式。

这是我的HTML / JS

...
<div class="col-sm-6">
   <div id="map" style="height:300px">
   </div>
</div>
...

<script>
    var map;
    function initMap() {
      var mapOptions = {
        center: new google.maps.LatLng(31.7717067, -106.3308777),
        zoom: 15,
        mapTypeId: 'roadmap'
        };
      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      addMarker();
      }
</script>
<script>
      function addMarker(){
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(31.7717067, -106.3308777),
          map: map
        });
</script>

我的CSS

#map {
    height: 100%;
  }
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

Answer 1

我破解了视图并使用了panTo方法。不确定这是否正确，但我得到了所需的视图。

var map;   
function initMap() {
    var location = {lat: 51.513347, lng: -0.088986};
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: location
    });
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    var latLng = new google.maps.LatLng(31.777423, -106.341530);
    map.panTo(latLng); 
}

Answer 2

你可以在一个功能中拥有它

 function initMap() {
    var location = {lat: 51.513347, lng: -0.088986};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: location
    });
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
 }

对于CSS试试这个：

#map {
 height: 400px;
 width: 100%;
 border-radius: 10px;
 background: #000;
}

不以地图标记为中心

2 个答案: