Question

是否可以创建唯一的URL来链接到从数据库中调用和显示的信息？

[我正在努力阐明这个问题，所以欢迎任何修改它的建议。]

细节：我有一个页面，其中包含嵌入式地图以及有关存储在单独数据库中的每个位置的相关信息。用户可以通过单击地图上的标记或使用侧栏中的导航按钮来浏览位置。这两种情况都会放大标记并显示侧边栏中有关位置的信息。所有这些都可以正常工作，但由于信息只是放在div中，因此无论显示什么内容，页面的URL始终都是相同的。

我希望能够创建和共享指向各个位置的链接，这些链接将使用地图中选择的点和侧栏中显示的信息打开。

我使用javascript函数从数据库中调用信息。以下是该代码的简化版本：

<a href="#" onClick='callMarker(markerNum);'>Click Me</a> 

function callMarker(markerNum) {
        var sql = new data.SQL({ user: 'me' });
        var sql_query = "SELECT * FROM map_name WHERE marker_id = " + markerNum;
        sql.execute(sql_query)
        .done(function(data) {
            console.log(data.rows[0]);

            var title = data.rows[0].title;

            // Displays the ID of the object in the external information box
            document.getElementById("title").innerHTML= data.rows[0].title;
}

由于每个位置都标有数据库中的唯一ID号（marker_id），因此似乎可以将其附加到当前URL的末尾，以创建与每个点关联的唯一URL。或者也许ID号（marker_id）可以某种方式被分配给div ID作为页面内的变量。我不知道该如何做或者两者是否有效。

任何想法或方向将不胜感激。我一直在寻找很多不同的方法，但没有找到任何似乎可以解决这个问题的方法。

Answer 1

如果您不想在服务器上执行任何操作以提供唯一的网址，则可以使用/ mymap＃uniqueId形式的网址使用客户端哈希。网址的哈希部分可以通过javascript访问：

window.location.hash

当用户在地图上点击时，您甚至可以在该位置设置该属性。因此，在callMarker函数中，您可以执行以下操作：

if(history.pushState) 
    history.pushState(null, null, '#myhash');      
else 
     location.hash = '#myhash';

在较新的浏览器中，第一种方法避免了硬刷新。

您可以在页面加载事件中获取此值，以在地图和侧边栏信息上呈现适当的点。

创建一个唯一的URL，用于链接从数据库中提取的数据

1 个答案: