使用 Google Maps javascript API 使用 SQL 数据库中的数据填充地图？答案

【问题标题】：Populate map with data from SQL Database using Google Maps javascript API?使用 Google Maps javascript API 使用 SQL 数据库中的数据填充地图？
【发布时间】：2014-11-28 14:14:40
【问题描述】：

我正在尝试使用 Google Maps API 填充路线。我编写了一个工作函数，它接受任何给定的纬度/经度值数组，我有一个很大的数据库坐标，我想用一个选择来填充地图。

如何将数据导入 JavaScript？到目前为止，我在网站上有一个按钮，按下它会运行一个查询，以 JSON 格式将我需要的内容回显到一些新页面中：

$con = mysqli_connect("localhost","root","password","database");

$return_arr = array(); $result = mysqli_query($con,"SELECT * FROM
Flight_Data WHERE  `DepDateTimeUTC` LIKE  '%10/1/13%'");


while ($row = mysqli_fetch_array($result)) {
    $row_array['ID'] = $row['ID'];
    $row_array['OriginLat'] = $row['OriginLat'];
    $row_array['OriginLong'] = $row['OriginLong'];
    $row_array['DestinLat'] = $row['DestinLat'];
    $row_array['DestinLong'] = $row['DestinLong'];

    array_push($return_arr,$row_array); }

$jsonarray = json_encode($return_arr); echo $jsonarray;

这是数据样本：

[
    {
    "ID":"1",
    "OriginLat":"48.6899",
    "OriginLong":"9.2220",
    "DestinLat":"37.014425",
    "DestinLong":"-7.965910"
    },
    ....
]

所以我需要将其解析为一个数组，并能够访问每个值，例如 masterArray[1][4] 等。

所以我卡住了，JavaScript 在一个单独的文件中，PHP 脚本也是如此，我可以将它放在同一个 HTML 页面中，但我仍然不知道如何获取它。

【问题讨论】：

标签： javascript php sql json database

【解决方案1】：

最好的方法是从您的网页使用异步 (Ajax) 查询，以 Json 格式从您的网络服务器中提取数据。最终结果将是 JavaScript 变量中可用的所有数据。

我建议使用 jQuery 之类的库来执行此操作 - 请查看此处的文档：http://api.jquery.com/jquery.ajax/

在 jQuery 中执行此操作的基本（未经测试）示例是：

<script>
    $(document).ready(function() {

        $.ajax("yourpage.php")
            .done(function(data) {
                mydata = data;
            });

    });    
</script>

【讨论】：

啊，所以使用 ajax 我可以引用 php 文件的结果数据并将其弹出到变量中？所以我只能说 var a = $jsonarray?例如？那将与其余的谷歌地图功能一起在javascript文件中吗？
是的，没错。在“完成”函数中，您可以将数据变量传递给您必须填充地图的任何 JavaScript 函数。只要您提供数据的 PHP 页面以有效的 JSON 格式返回数据，最好是带有“application/json”的 mime 类型标头，它应该都能正常工作。
这可能会有所帮助：stackoverflow.com/questions/4064444/…
我把它链接起来了，它似乎工作了，但我无法访问里面的数据？我使用了控制台日志，它要么是空白的要么是未定义的
我建议使用浏览器的开发工具调试器（在我看来，Firefox 似乎拥有最好的开发工具）在 .done() 函数上设置断点，然后查看数据参数。