基础标签和谷歌地图

Foundation tabs and Google Map

本文关键字：谷歌地图 标签      更新时间：2023-09-26

我把一个谷歌地图内的基础选项卡，它加载为灰色没有控制。如果我以任何方式调整浏览器的大小，那么地图将正确显示，但我不知道如何让它在选择特定选项卡时刷新/调整地图的大小。非常感谢所有的帮助。

<style>
    #propertymap {
        width: 100%;
        height:480px;
    }
</style>
<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Pictures</a></li>
  <li class="tab-title"><a href="#panel2">Virtual Walkthrough</a></li>
  <li class="tab-title"><a href="#panel3">Map</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>Pictures</p>
  </div>
  <div class="content" id="panel2">
  <p>Virtual Walkthrough</p>
  </div>
  <div class="content" id="panel3">
    <div id="propertymap"></div>
    <script>
    var latitude={tag_latitude}, //the tag is for the business catalyst web app 
        longitude={tag_longitude};
    var marker;
function initMap() {
  var map = new google.maps.Map(document.getElementById('propertymap'), {
    center: {lat: latitude, lng: longitude},
    zoom: 15
  });
  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: latitude, lng: longitude}
  });
  marker.addListener('click', toggleBounce);
}
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
</script>
<style>
    #propertymap {
        width: 100%;
        height:480px;
    }
</style>
<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Pictures</a></li>
  <li class="tab-title"><a href="#panel2">Virtual Walkthrough</a></li>
  <li class="tab-title"><a href="#panel3">Map</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>Pictures</p>
  </div>
  <div class="content" id="panel2">
  <p>Virtual Walkthrough</p>
  </div>
  <div class="content" id="panel3">
    <div id="propertymap"></div>
    <script>
    var latitude={tag_latitude}, //the tag is for the business catalyst web app 
        longitude={tag_longitude};
    var marker;
function initMap() {
  var map = new google.maps.Map(document.getElementById('propertymap'), {
    center: {lat: latitude, lng: longitude},
    zoom: 15
  });
  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: latitude, lng: longitude}
  });
  marker.addListener('click', toggleBounce);
}
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
</script>

  </div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=initMap"></script>
  </div>
</div>

http://vprintz.businesscatalyst.com/property-list/4-bay-meadows是它在网站上的显示方式

我以前有同样的问题，我通过添加这段代码来修复它

 function initMap() {
  var map = new google.maps.Map(document.getElementById('propertymap'), {
    center: {lat: latitude, lng: longitude},
    zoom: 15
  });
  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: latitude, lng: longitude}
  });
  marker.addListener('click', toggleBounce);
  jQuery('document').ready(function(){ 
     google.maps.event.trigger(map,'resize',{});
  });
}
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

，最好将其放在脚本的末尾，但关键是在加载后触发组件上的resize事件，这将由该行完成。

这是我最终采用的解决方案:

<script>
var latitude={tag_latitude}, //the tag is for the business catalyst web app 
    longitude={tag_longitude};
var marker;
function initMap() {
   var map = new google.maps.Map(document.getElementById('propertymap'), {    
   //change propertymap to your map id
   center: {lat: latitude, lng: longitude},
   zoom: 15 //set to preferred zoom level
});
marker = new google.maps.Marker({
   map: map,
   draggable: true,
   animation: google.maps.Animation.DROP,
   position: {lat: latitude, lng: longitude}
 });
 marker.addListener('click', toggleBounce); //for marker drop animation, can be removed
jQuery('#panel3').on('toggled', function(){ //change #panel3 to your tab id
    var center = new google.maps.LatLng(latitude, longitude);
    map.setCenter(center); //must recenter map after tab loads
    google.maps.event.trigger(map,'resize',{});
 });
}
function toggleBounce() { // for marker drop animation, can be removed
 if (marker.getAnimation() !== null) {
   marker.setAnimation(null);
 } else {
 marker.setAnimation(google.maps.Animation.BOUNCE);
 }
}
</script>

这就是我使用Foundation选项卡更改事件的方法:

var map = null;
$('[data-tabs]').on('change.zf.tabs', function () {
    // check that user selected Map tab for the first time
    // if yes then load and show Google map 
    // let's assume map is located in Tab#2, thus we need Tab with index of 1
    if (!map && $('.tabs-title.is-active').index() == 1) {   // change "1" to your tab# + 1
        // create your map here
        map = new google.maps.Map(document.getElementById('divMap'));
        // add map markers and so on...                
    }
    // optional: if you have Foundation equalizer plugin on the page 
    // then uncomment line below to reInit the plugin 
    // Foundation.reInit('equalizer');
});

我最近一直有这个问题。它帮助我在点击标签时只启动了一次谷歌地图;

    $('#tabWithMap').one('click', function(){
//create map and markers etc.
});
相关文章：