地图URL随视图变化后，如何实现URL分享与剪贴板复制？

问题核心在于原有代码在页面加载时就固定了URL变量的值，地图缩放/移动后更新的hash参数不会同步到已初始化的变量中。需要修改为在用户触发操作时实时获取当前完整URL，以下是修复后的代码：

1. 修复复制到剪贴板功能 #

将获取URL的逻辑移到点击事件内部，确保每次复制都拿到最新的带hash参数的URL：

$('.clipboard').on('click', function() {
  const temp = $("<input>");
  // 实时获取当前包含地图状态的完整URL
  const currentUrl = window.location.href;
  $("body").append(temp);
  temp.val(currentUrl).select();
  document.execCommand("copy");
  temp.remove();
  alert('Copied!');
})

2. 修复社交分享功能 #

把获取页面URL的逻辑从初始化阶段移到每个社交按钮的点击事件中，保证每次分享都使用最新的地图状态URL：

function socialWindow(url) {
  var left = (screen.width - 570) / 2;
  var top = (screen.height - 570) / 2;
  var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
  window.open(url,"NewWindow",params);
}

function setShareLinks() {
  // 仅提前获取固定的分享描述文本
  var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));

  $(".social-share.facebook").on("click", function() {
    const pageUrl = encodeURIComponent(window.location.href);
    url = "https://www.facebook.com/sharer.php?u=" + pageUrl;
    socialWindow(url);
  });

  $(".social-share.twitter").on("click", function() {
    const pageUrl = encodeURIComponent(window.location.href);
    url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
    socialWindow(url);
  });

  $(".social-share.linkedin").on("click", function() {
    const pageUrl = encodeURIComponent(window.location.href);
    url = "https://www.linkedin.com/sharing/share-offsite/?url=" + pageUrl;
    socialWindow(url);
  });
  
  $(".social-share.zalo").on("click", function() {
    const pageUrl = encodeURIComponent(window.location.href);
    url = "https://sp.zalo.me/plugins/sdk.js/?url=" + pageUrl;
    socialWindow(url);
  });
}

setShareLinks();

关键修改说明 #

• 不再提前缓存URL，而是通过window.location.href在用户操作时实时获取完整地址，该属性会自动包含地图更新后的hash参数。
• 社交分享中仅保留固定的描述文本缓存，动态URL每次点击都重新获取编码，确保分享内容与当前地图状态一致。

内容的提问来源于stack exchange，提问作者Jayzz