在Google Maps API V3中绘制标记

时间:2011-12-21 15:55:27

标签: javascript google-maps-api-3 google-maps-markers

我是编写Google地图代码的新手,对Javascript和PHP知之甚少。但是,我设法编写连接到我的SQL DB的PHP文件并输出XML文件。虽然,我无法弄清楚如何创建与XML文件相关的多个标记,该文件先前已经对lat / lng坐标进行了地理编码。

我知道创建市场函数(?)用于在地图上创建市场,但我不知道如何告诉函数迭代生成的XML文件,然后显示标记。我想我也想限制基于平铺的标记显示,因为我想要显示的所有对象都在半径20英里范围内。

请指出正确的方向。我不了解代码的逻辑,至少有一些代码。请指出正确的文章,以及如何将所有代码放在一起。比如创建标记,按网格过滤等等。我知道可以做到!

谢谢。

3 个答案:

答案 0 :(得分:1)

首先,您需要了解如何解析XML数据,以便将其与Maps API一起使用。为此,我建议使用jQuery来执行此操作。这是一篇基础文章,旨在帮助您开始使用jQuery阅读XML:http://think2loud.com/224-reading-xml-with-jquery/

然后通过Google Maps documentation,有很好的处理标记的例子。

  

我想我想限制基于tile的标记显示为   好吧,因为我要显示的所有物体都在20英里范围内   半径。

我不知道你在这里究竟要求什么。据我所知,你不能根据地图图块进行过滤。您可以显示特定点X英里范围内的标记。简单易行的方法就是找到具有特定边界框的坐标,其中纬度和经度在特定点的X度内。如果你这样做我会建议在服务器端这样做。这是一个SQL查询,用于过滤大约15英里(article context here)内的位置:

SELECT Address, SQRT(POWER(Latitude - @Latitude, 2) + POWER(Longitude - @Longitude, 2)) * 62.1371192 AS DistanceFromAddress
FROM Stores
WHERE ABS(Latitude - @Latitude) < 0.25 AND ABS(Longitude - @Longitude) < 0.25
ORDER BY DistanceFromAddress

更好的方法是使用Haversine formula来确定某个点是否在范围内。您可以自己对此进行硬编码:example或使用Google's Geometry library(使用半正式公式)来完成此操作。

答案 1 :(得分:0)

有许多方法可以使用XML数据创建标记。

  1. 编写一个在加载页面时调用的php函数,它输出lat / lng以及绘制标记和创建工具提示等所需的其他数据。您可以以任何格式发送数据,例如XML,JSON到fe。到目前为止,Javascript无法从前端读取文件(Chrome有API,但我不建议使用它,服务器端方法更安全。)

  2. 要缩放到包含所有标记但没有看到整个WORLD_VIEW的gmaps的区域,还有很多方法。我所知道的是创建一个LatLngBounds对象,它基本上就像一个矩形,只包含所有标记。然后在GoogleMaps API中,您将找到一个名为fitBounds的方法,它是Map类的一种方法,它适合此对象,在地图div上创建所有标记周围的边界。

  3. 如果你愿意,我可以通过小提琴给你代码,让我知道。

答案 2 :(得分:0)

我也使用Google Maps API来显示标记 - 但是使用JSON。我找到了following关于使用带标记的XML:

 // Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}

使用XML与使用此API的其他传输相比也是一个很好的discussion