javascript - 当非事件标签页显示时，Google map 未居中于jQuery标签页:无

我正在尝试为我的房地产站点实现GMap，该站点的每个属性都基于带有自定义标记图标的纬度和经度定位地图。问题在于，初始化后，地图不以标记图标为中心。我也读了很多文章，但是任何解决方案都对我不起作用，因此如果有人能够提供帮助，找到一个可行的解决方案将非常高兴。

到目前为止，这是我所做的。

视图文件中的代码-我将数据属性用于动态位置（LatLong）值，这与我在属性管理中的自定义字段一起使用。

<div class="property">
<ul class="tabs clearfix">
    <li class="current">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
</ul>
<div class="box visible">
    Tab 1 content
</div>
<div class="box">
    Tab 2 content
</div>
<div class="box">
    <div id="map" class="property-map" data-latitude="xxxxxx" data-longitude="xxxxxx"></div>
</div>
</div>

jQuery：

 $('ul.tabs').on('click', 'li:not(.current)', function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('div.property').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
})
$('ul.tabs').on('click', 'li:not(.current)', function() {
    google.maps.event.trigger(map, "resize");
})

CSS：

.property { margin-top:30px; }
.property .box { display: none; }
.property .box.visible { display: block; }
.property .tabs li { position:relative; float:left; margin:0 -1px 0 0;  padding:14px 35px; text-transform:uppercase; font-weight:600; color:#666; border:1px solid #e9e9e9; cursor:pointer; transition: color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out;}
.property .tabs li:hover { color:#000; }
.property .tabs li.current { margin-top:-2px; color:#000; border-top:3px solid #fcb042; border-bottom:1px solid #fff; background: #f0f0f0;}
.property .box { margin-top:-1px; padding:16px 19px 18px; line-height:20px; color:#666; border:1px solid #e9e9e9;}

.property-map { width:800px; height: 420px; }

主索引文件：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"" type="text/javascript"></script>
<script type="text/javascript">


function initialize_map() {

var latitude = $('#map').data('latitude');
var longitude = $('#map').data('longitude');

    var myLatlng = new google.maps.LatLng(latitude,longitude);
    var mapOptions = {
        zoom: 17,
        scrollwheel: true,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);


    var marker = new google.maps.Marker({
        position: myLatlng,
        icon: '../images/new-marker.png',
        title:"Marker title",
        map: map

    });


}
google.maps.event.addDomListener(window, 'load', initialize_map);

</script>

最佳答案

淡入淡出完成后，您需要在触发调整大小事件后设置地图的中心。

$(this).addClass('current').siblings().removeClass('current')
  .parents('div.property').find('div.box').eq($(this).index()).fadeIn(150,
    function() {
      google.maps.event.trigger(map, "resize");
      map.setCenter(mapOptions.center);
    })
  .siblings('div.box').hide();
})

proof of concept fiddle

代码段：

var mapOptions, map;

function initialize_map() {

  var latitude = $('#map').data('latitude');
  var longitude = $('#map').data('longitude');

  var myLatlng = new google.maps.LatLng(latitude, longitude);
  mapOptions = {
    zoom: 17,
    scrollwheel: true,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);


  var marker = new google.maps.Marker({
    position: myLatlng,
    icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
    title: "Marker title",
    map: map

  });
  $('ul.tabs').on('click', 'li:not(.current)', function() {
    $(this).addClass('current').siblings().removeClass('current')
      .parents('div.property').find('div.box').eq($(this).index()).fadeIn(150, function() {
        google.maps.event.trigger(map, "resize");
        map.setCenter(mapOptions.center);
      }).siblings('div.box').hide();
  })
}
google.maps.event.addDomListener(window, 'load', initialize_map);

.property {
  margin-top: 30px;
}
.property .box {
  display: none;
}
.property .box.visible {
  display: block;
}
.property .tabs li {
  position: relative;
  float: left;
  margin: 0 -1px 0 0;
  padding: 14px 35px;
  text-transform: uppercase;
  font-weight: 600;
  color: #666;
  border: 1px solid #e9e9e9;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
  -webkit-transition: color 0.3s ease-in-out;
}
.property .tabs li:hover {
  color: #000;
}
.property .tabs li.current {
  margin-top: -2px;
  color: #000;
  border-top: 3px solid #fcb042;
  border-bottom: 1px solid #fff;
  background: #f0f0f0;
}
.property .box {
  margin-top: -1px;
  padding: 16px 19px 18px;
  line-height: 20px;
  color: #666;
  border: 1px solid #e9e9e9;
}
.property-map {
  width: 800px;
  height: 420px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="property">
  <ul class="tabs clearfix">
    <li class="current">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="box visible">Tab 1 content</div>
  <div class="box">Tab 2 content</div>
  <div class="box">
    <div id="map" class="property-map" data-latitude="42" data-longitude="-72"></div>
  </div>
</div>

关于javascript - 当非事件标签页显示时，Google map 未居中于jQuery标签页:无，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33921123/