谷歌地图 API - 标记，MySQL答案

【问题标题】：Google Maps API - Marker, MySQL谷歌地图 API - 标记，MySQL
【发布时间】：2013-06-10 03:37:39
【问题描述】：

我读过 Google 的地理编码服务，它允许将命名的位置（例如曼彻斯特）映射到来自 Google 数据库的坐标，以便可以在 Google 地图上放置标记：https://developers.google.com/maps/documentation/javascript/geocoding#Geocoding

在我的情况下，我有一个 MySQL 数据库，其中定义了一个表 jobs。在这张表中，我存储（不出所料）工作信息，例如薪水，职位，参考等。在此表中也是工作地点的列。 大部分它包含城市（或城市加邮政编码）。奇数次它要么为 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？这是实现它的不太理想的方式吗？

谢谢。

【问题讨论】：

您的问题范围有点广，但是如果您还没有阅读，这里有一篇很棒的文章可以帮助您入门:) -- developers.google.com/maps/articles/phpsqlajax_v3
您通过 JSON 将值传递给 javascript，在 ajax 调用中.....设置一个将数据输出为 json_encode() 数据的 php 页面，然后从那里开始.....
这是我选择的图书馆....它很棒，您只需提供一个地址，它就会为您带来魔力...gmap3.net/en
感谢您的这些建议 - 将看看！

标签： php javascript python google-maps-api-3 google-maps-markers

【解决方案1】：

听起来，除了 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.parse() 将响应文本转换为您可以使用的实际变量。

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

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

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

【讨论】：

【解决方案2】：

只需使用 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
           }
          }
          });

   });

这应该让你开始:)

【讨论】：