4

因此，我编写了一些脚本，在我的页面上设置了 Google 地图。这些脚本包含在<head>我的页面中，并使用 jQuery 构建带有从页面上的地址列表生成的标记的地图。

但是，对于 JavaScript 正确放置标记所需的每个地址，我都有一些精确的坐标数据。这不是我希望用户在屏幕上看到的信息，那么将这些数据放入我的文档的“最佳实践”方式是什么？

4

7 回答 7

1

我的第一个想法是带有 CSV 或类似数据的隐藏输入。由于数据不是真正的秘密，只是不用于显示。

 <input id="coordinates" type="hidden" value="123.2123.123:123,123,321;....." />

然后用jquery访问它

 var myCoordsCSV = $("#coordinates").val();

编辑：下面的答案提到了 JSON，这将是一个更好的解决方案，结合使用多个隐藏输入，正如另一个答案中指出的那样。

于 2008-12-04T10:19:30.300 回答
1

我不建议使用样式来隐藏某些东西，它会出现在没有（或禁用）css 支持的浏览器中，并且看起来很奇怪。

您可以将其存储在 javascript 变量中或添加具有隐藏值的表单（在未使用的表单中以确保其有效）：

<form action="#" method="get" id="myHiddenValues">
   <input type="text" name="hiddenval1" id="hiddenval1" value="1234"/>
   <input type="text" name="hiddenval2" id="hiddenval2" value="5678"/>
</form>

您可以从 javascript 读取和更新。

于 2008-12-04T10:23:29.840 回答
1

Gareth，您可能想在http://www.json.org/上查看 JSON

除了紧凑性的好处之外，它还获得了强大的服务器端支持，如果您将来决定使用 HTTPRequest 动态加载坐标，这样做非常容易，而无需对现有脚本进行太多修改。

JSON — JavaScript Object Notation 是一种有效地序列化 JavaScript 对象的本地方式。

这里有一些例子：http: //www.json.org/example.html

您甚至可以将所有地址信息存储在以 JSON 格式记录的 JavaScript 对象数组中，并在屏幕上动态构建列表。这将使您能够在“运行时”以任何您需要的方式轻松地对地址进行排序、过滤和操作。

另一种方法是用一个标签来包含每个地址（一个简单的 div 就可以了），并为包含坐标的标签引入一个新属性：

<div id="addr1" coordinates="...">
    17 Coldwell Drive<br />
    Blue Mountain<br />
    BA93 1PF<br />
    United Kindom
</div>

然后

var myCoordsCSV = $("addr1").coordinates;

如果您愿意，可以将第二种方法与 JSON（存储坐标对象）结合使用，或者为每个坐标添加两个属性或保留逗号分隔列表等。

第二种方法也很好地降级并且对搜索机器人友好。

于 2008-12-04T10:28:05.197 回答
0

如果信息不应该对用户可见，则不应保留在文档中。例如，数据可以保留在脚本区域中。但是，如果由于各种原因无法做到这一点，您可以使用带有 style="display:none" 的 div 来隐藏信息。

于 2008-12-04T10:14:35.710 回答
0

既然您已经有了 Jquery，为什么不直接对另一个页面/脚本进行 AJAX 调用来获取坐标数据呢？

于 2008-12-04T10:30:23.307 回答
0

想要获取数据的人总是可以看到这些数据。试图隐藏它只会减慢那些不擅长它的人。我的建议是不要使用 XHR，因为这对很多人来说速度很慢，并且总是会增加页面加载时间，你应该尽量减少。使用数组。

var myArray = new Array();  
myArray.push([1.000,1.000,"test1"]);  
myArray.push([2.000,2.000,"test2"]);  
myArray.push([3.000,3.000,"test3"]);  
for(i=0;i<myArray.length;i++){  
    yourGoogleMapsAPICall(myArray[i][0],myArray[i][1],myArray[i][2]);  
}

是吗？

于 2008-12-04T10:55:32.957 回答
0

将数据保存在 Javascript 或 JSON 中会忽略不显眼的 Javascript。“不显眼”的关键之一是在不存在 Javascript 时优雅地降级 - 理想情况下，当 CSS 也不存在时。出于这个原因，您应该将数据放在文档中，而不是在 Javascript 中，以便用户可以看到它。

此外，您应该将它呈现在一个看起来很干净的表格或 div 结构中，而无需任何 CSS。在这种情况下，表可能是表示此类数据的正确语义结构。您可以为那些有 CSS 但没有 Javascript 的人进一步设置表格样式。然后 Javascript 可以轻松解析数据并将其放入地图中，但如果不支持 Javascript，数据仍将显示。

另一个好处是它很容易被搜索引擎等机器人和任何想要编写第三方混搭的人抓取。（如果您不想共享它，您可能会看到这是一个缺点，但如果有人想要足够的数据，他们无论如何都会从页面中获取它。）对于使用屏幕阅读器的视障用户来说，它也将以简洁的形式出现.

现在您不想让表格默认可见，因此您必须使用 CSS 将其隐藏。但是如果用户有 CSS 但没有 Javascript 怎么办？然后你可能想展示桌子......这就是优雅地贬低的意思。所以你要做的是让表格在 CSS 中可见（即不显式隐藏它），然后运行一些 Javascript 在初始化时隐藏它：

document.getElementById("geodata").style.display = "none";

或一些特定于库的等价物，例如

$("geodata").hide()

唯一的问题是，如果您在 document.onload() 中运行它，表格将显示几秒钟。因此，在您输出表格后将其包含在脚本标记中。这是一种可以在 HTML 中包含脚本标记的情况。如果这样做，请避免使用特定于库的代码，因为在评估内联脚本时，库可能尚未加载。

现在您已经涵盖了所有情况： - JS 和 CSS - 数据在地图中很好地呈现 - 没有 JS，但 CSS - 数据很好地呈现在表格中 - 没有 JS 和没有 CSS - 数据呈现在原始 HTML 表格中（另一种情况，JS并且很少出现 CSS，如果你愿意，你可以处理它，但有点毫无意义）

您的 Javascript 代码也将是干净的，因为它正在解析一个构造整齐的数据结构。您可以在开发过程中轻松检查表，以查看它是否包含正确的数据以及地图是否正确反映了该数据。

于 2008-12-04T13:27:49.500 回答