1

我已经阅读了谷歌的地理编码服务，它允许将命名位置（如曼彻斯特）映射到谷歌数据库中的坐标，以便可以在谷歌地图上放置标记：https ://developers.google.com/maps/documentation/javascript /地理编码#地理编码

在我的情况下，我有一个jobs定义了表的 MySQL 数据库。在这个表中，我存储（毫不奇怪）工作信息，例如薪水、职位、参考等。在这个表中也是工作位置的列。大多数时候它包含城市（或城市加邮政编码）。奇数次它要么为 NULL，要么具有诸如“未指定位置”之类的字符串。

为了查看这些记录，我在我的测试机器上运行了一个网络服务器，并在我的浏览器中显示了表的记录，其中包含一些 HTML 和一般的 php 脚本（一个 DB 驱动的 Intranet 页面）。

我现在已将此页面分为两个部分。使用 Google Maps v3 API，我的下半部分包含 Google Map。我想要实现的是：

  • 根据位置列中的位置字符串自动放置标记。
  • 可点击的标记，点击后会产生信息窗口（将包含职位等）。

我想知道的是最好的方法是什么？

我在 SO 上阅读了一些类似的帖子，用户也有类似的情况。从这些读数中，我可以确定某些 OP 在将其插入表时已努力存储其记录位置的 long/lat，然后使用 Javascript 读取 long/lat 以生成标记。

为此，我需要修改一些代码和表格。这是一种选择，但我更愿意探索可能使用 Google 地理编码服务的另一种选择？有人有这方面的经验吗？有什么建议，可以给推荐吗？

另外，假设我使用了后一个选项。我使用 PHP 脚本从数据库中加载记录。我如何将位置传递给 Javascript，以便 Google Map API 可以使用地理编码服务查询 long/lat？这是实现它的不太理想的方式吗？

谢谢。

4

2 回答 2

0

听起来您除了 Javascript 和从 PHP 脚本获取数据的方式外，一切都已准备就绪。

因此，让我们从将 PHP 脚本中的数据导入 Javascript 开始。这样做的方法是使用 AJAX（用于学习它，不是官方来源：http ://www.w3schools.com/ajax/ajax_intro.asp）。加载网页后，Javascript 可以使用 XMLHttpRequest 对象（如果您更喜欢使用 Javascript 框架，则可以使用 jQuery.ajax()）加载更多信息。基本上这是 Javascript 在后台加载一个新页面，然后自己处理内容。您将需要设置 PHP 脚本（或制作另一个 - 我不熟悉这部分）以在与您正在访问的页面不同的 URI 中提供您想要的信息。然后在 Javascript XMLHttpRequest 中使用这个 URI。通常，您会得到 PHP 脚本以计算机易于理解的形式提供数据，例如 JSON（推荐）或 XML（与 HTML 相对，易于人类理解 - 一旦呈现）。此过程称为 API。在您的 JavaScript 中，您将使用 JSON。

获得 Javascript 中的地址后，使用您提到的地理编码 API 将它们转换为 GPS 坐标，然后使用 Google Maps Javascript API 在地图上放置标记：https ://developers.google.com/maps/documentation /javascript/overlays#Markers。您也可以添加一个信息窗口（在上面的页面中搜索 InfoWindo - 显然我只能包含 2 个链接）。

正如您所提到的，对所有地址进行地理编码并将纬度/经度存储在数据库中可能是一个更好的主意。造成这种情况的最大原因是，如果您如上所述在 Javascript 中进行地理编码，那么每次用户加载页面时，都会重新进行地理编码。这有两个问题： 1. 对于谷歌来说，这是一项昂贵的操作，需要耗费他们的资源。2. 对您而言，这意味着填充地图需要更长的时间（因为您必须等待 Google 对您的 AJAX 调用的响应 - 地理编码一个，而不是您将如上所述实施的那个），您可能会遇到谷歌的使用限制是因为 1. 如果您决定提前进行地理编码并将结果存储在您的数据库中，您应该使用“谷歌地理编码 API”，而不是 Javascript 地理编码服务。我可以'

我希望这会有所帮助，如果其他人想用更多链接更新我的答案，请随意。

于 2013-06-13T17:03:41.060 回答
0

只需使用 Gmap3 库，然后为它提供一个地址......就像这样...... http://gmap3.net/en/catalog/18-data-types/address-63

你设置一个div ...

  <div id="test" width=500 height=500></div>

然后你的 Jquery 将地图插入到 div....

$("#test").gmap3({
marker:{
  address: "Haltern am See, Weseler Str. 151"
},
map:{
  options:{
    zoom: 14
  }
}
});

该地址可以从您的 PHP 中回显（尽管这被认为是不好的做法）

$("#test").gmap3({
marker:{
  address: '<?php echo $addressfromDB;?>'
},
map:{
  options:{
    zoom: 14
  }
}
});

但是最好做一个ajax调用，然后在成功回调中包含这段代码

   $.getJSON('getlocation.php', function(data){

        $("#test").gmap3({
          marker:{
          address: data.address // or whatever structure your json is in.
          },
        map:{
          options:{
            zoom: 14
           }
          }
          });

   });

这应该让你开始:)

于 2013-06-13T16:43:31.810 回答