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

How to default zoom in google map in html

本文关键字：谷歌地图 默认 放大 html      更新时间：2023-09-26

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

JS小提琴

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

你好在谷歌地图iframe我们不能直接设置为显示：无查看您的演示

JSFIDDLE 链接

See this link

最初

隐藏时重新加载一次 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即可。

相关文章：