Question

我有一个嵌入谷歌地图的iframe：

<iframe class="addressMap" id="addressMap" width="100%" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps?&q={{$location}}&output=embed"></iframe>

其中$ location是Address1。一旦页面加载，地图显示Address1位置，点击按钮我将地图的src更改为另一个地址，说地址2为：

$('.addressMap').attr('src',"https://maps.google.it/maps&q="+Address2+"&output=embed");

似乎工作正常。但当我按下浏览器后退按钮iframe重新加载并再次显示Address1而不是Address2时，任何人都可以提出建议。

Answer 1

如果您希望在用户点击您的地址2按钮后，地图会在返回后继续显示地址2（或者即使用户离开您的网站并在一段时间后返回），然后使用localStorage保存事实上点击了按钮（或者可能是保存想要的地址），例如：

var address1 = '{{$location}}';
$(function(){
  // when page load, we check if we have a stored address, if not, we use address1
  var currentAddress = localStorage.currentAddress;
  if(!currentAddress) {
     currentAddress = address1;
  }
  $('.addressMap').attr('src',"https://maps.google.it/maps&q="+currentAddress+"&output=embed");

});

// event handler for the button
function changeAddress() {
  $('.addressMap').attr('src',"https://maps.google.it/maps&q="+Address2+"&output=embed");
  // we store the new address
  localStorage.currentAddress = Address2;
}

显示以前位置的Google地图

1 个答案: