google-maps - 谷歌地图仅在模态时不以标记为中心

Question

看看这个 jsfiddle http://jsfiddle.net/CdRdd/2/。看看地图是如何偏离标记的？现在看看不在模态http://jsfiddle.net/CdRdd/4/中的同一张地图，它可以工作。这是怎么回事？

function initialize() {
  var addresses = $('.tracking-map-marker-details');

  window.map = new google.maps.Map(document.getElementById('map_canvas_trackingmap'), {
    mapTypeId: google.maps.MapTypeId.HYBRID
  });

  var infowindow = new google.maps.InfoWindow(),
      bounds = new google.maps.LatLngBounds(),
      geocoder = new google.maps.Geocoder();

    $(addresses).each(function() {
        var address  = $(this).data('address'),
            letter   = $(this).data('letter'),
            status   = $(this).data('status');

      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var marker = new google.maps.Marker({
            icon: "http://www.google.com/mapfiles/marker" + letter + ".png",
            shadow: 'http://www.google.com/mapfiles/shadow50.png',
            position: results[0].geometry.location,
            map: map
            });

            bounds.extend(results[0].geometry.location);
        }
      });
    });

  var listener = google.maps.event.addListenerOnce(map, "idle", function () {
    map.fitBounds(bounds);
    map.setZoom(5);

    $('#tracking_map_modal').modal('show').on('shown', function () {
      google.maps.event.trigger(map, 'resize');
    });
  });     
}

Answer 1

答案是显示模态后 setCenter

$('#tracking_map_modal').modal('show').on('shown', function () {
      google.maps.event.trigger(map, 'resize');
      map.setCenter(bounds.getCenter());
 });

Answer 2

google.maps.Map fitBounds只会确保您的地图的视口将包含给定的边界。

你想打电话给google.maps.Map setCenter，传入你的标记latLng：

if (status == google.maps.GeocoderStatus.OK) {
    // var marker = ...;
    window.map.setCenter(results[0].geometry.location);
    // ...
}