Question

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

但是，我有一些精确的坐标数据，每个地址都是javascript正确放置标记所需要的。这不是我想在屏幕上向用户显示的信息，那么将这些数据放入我的文档的“最佳实践”方法是什么？

Answer 1

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

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

然后使用jquery

访问它

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

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

Answer 2

我不会建议使用样式隐藏某些东西，它会显示在没有（或禁用）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阅读和更新。

Answer 3

Gareth，你可能想看看http://www.json.org/

上的JSON

除了紧凑性的好处之外，它还具有强大的服务器端支持，如果您决定将来使用HTTPRequest动态加载坐标，那么在不必修改现有脚本的情况下这样做非常容易。 / p>

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（商店坐标对象）结合使用，或者为每个坐标添加两个属性，或者保留逗号分隔列表等。

第二种方法也很好地退化，并且搜索机器人友好。

Answer 4

如果用户不应该看到该信息，则该信息不应保留在文档中。例如，数据可以保留在脚本区域中。但是，如果出于各种原因这是不可能的，您可以使用一个div来设置样式=“display：none”来隐藏信息。

Answer 5

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

Answer 6

对于想要访问数据的人来说，数据总是可见的。试图隐藏它只会减慢那些不熟悉它的人。我的建议是不要使用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]);  
}

是什么事情？

Answer 7

保持Javascript或JSON中的数据缺少关于不引人注目的Javascript的观点。关于“不引人注目”的一个关键问题是当Javascript不存在时优雅地降级 - 理想情况下，当CSS不存在时也是如此。出于这个原因，您应该将数据放在文档中，而不是放在Javascript中，以便用户可以看到它。

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

另一个好处是它很容易被机器人（如搜索引擎）和任何想要编写第三方mashup的人报废。（如果你不想分享它，你可能会发现这是一个缺点，但如果有人想要足够的数据，他们无论如何都会从页面上获取数据。）对于使用屏幕阅读器的视障用户，它也会以整洁的形式存在。

现在您不希望默认情况下使表可见，因此您必须使用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代码也将是干净的，因为它正在解析整齐构造的数据结构。您可以在开发期间轻松检查表格，以查看它是否具有正确的数据以及地图是否正确反映了该数据。

在网页上包含不显眼信息的最佳方式

7 个答案: