Question

默认情况下，第二个城市是隐藏。点击第二个按钮时，第一个城市地图将隐藏，第二个城市地图将显示。但在那里，第二个城市地图显示缩小方法。如何放大Google地图。

$(document).ready(function(){
  $("#bangalore").click(function(){
    $("#hyd").hide();
    $("#ban").show();
  });
  $("#hyderabad").click(function(){
    $("#ban").hide();
    $("#hyd").show();
  });
});

Answer 1

你好在谷歌地图iframe我们不能直接设置为display：none 看你的演示

jsfiddle link

See this link

Answer 2

在最初隐藏iframe时重新加载iframe：

$("#hyderabad").click(function () {
    $("#ban").hide();
    $("#hyd").show();

}).one('click', function () {
    $("#hyd").prop('src', $("#hyd").attr('src'));
});

http://jsfiddle.net/p67mq6wo/6/

建议保存带宽： 仅设置最初可见iframe的src。对于其他iframe，请设置存储URL的属性data-src。

当您展示其他iframe时，将src设置为data-src属性：

$("#hyderabad").click(function () {
    $("#ban").hide();
    $("#hyd").show();

}).one('click', function () {
    $("#hyd").prop('src', $("#hyd").data('src'));
});

特别是当您有许多隐藏的iframe时，页面的加载速度会快得多，因为地图只会在您显示时加载。

http://jsfiddle.net/p67mq6wo/7/

当然，您也可以使用单个iframe，只需根据点击的按钮设置新的src。

如何在html中默认放大谷歌地图

2 个答案: