将 MySQL 数据与 Google Maps API 结合使用

Question

我正在处理一个包含 HTML、PHP 和 Javascript 的 .php 文件以及 MySQL 中一个名为 data 的表，其中包含按日期排序的 GPS 信息。我正在使用以下代码，以便用户可以在表单中键入日期。

    <form method="POST">
        <div class="col-sm-12">
            <p>
                <label for="route_date_ids">Insert date</label>
                <input name="route_date_id"></input>
            </p>
        </div>
        <div class="col-sm-12">
            <p>
                <input type="submit" value="View route"/>
            </p>
        </div>
    </form>
<?php if (isset($_POST['route_date_id'])) : ?>
<?php
$query = "SELECT * FROM data WHERE measured_at LIKE ". $_POST['route_date_id'];
$result = mysqli_query($conn, $query);

因此，一旦用户键入日期并按下按钮，在服务器端，我就会得到日期以用户键入的字符开头的数据。我现在的目标是将这些信息（$result，包含纬度和经度数据）传递给下面的函数。

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
        center: {lat: 0, lng: -180},
        mapTypeId: 'terrain'
    });
    var flightPlanCoordinates = [
        {lat: 37.772, lng: -122.214},
        {lat: 21.291, lng: -157.821},
        {lat: -18.142, lng: 178.431},
        {lat: -27.467, lng: 153.027}
    ];
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
}

所以当页面在提交后重新加载时，地图会显示与用户输入的日期相对应的坐标。

我无法解决最后一个问题。任何帮助将不胜感激。

Answer 1

给你一个id如下：

    <form id = "form">

按如下方式给输入字段加上id（记住输入标签是一个独立的标签，它没有结束标签）

    <input name="route_date_id" id = "route_date_id">

在 initMap() 方法之外声明变量“map”，如下面的脚本所示，并创建一个名为“data_fetcher.php”的单独文件，将对其进行 ajax 调用，并传递可以作为 $_POST[ 访问的日期值'date_value'] 在 date_fetcher.php 文件中，然后编写获取日期对应的 lat、lng 数据的逻辑。获得结果后，将其存储在一个数组中，然后将结果 json_encode 并回显，以便将其返回以响应 ajax 调用。观察以下脚本中的注释，其中需要将结果中获得的 lat、lng 存储在数组中。也不要忘记包含 jquery 库。

var map;
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
});
google.maps.event.addDomListener(document.getElementById('form'), 'submit', function(e) {
    var date_data = document.getElementById('route_date_id').value;
    $.ajax({
    url:"data_fetcher.php",
    type:"POST",
    data: {date_value:date_data},        
    dataType: 'json',
    success: function(respond){


 //In the respond you will get the coordinates add them to the array, 'flightPlanCoordinates' then


         var flightPath = new google.maps.Polyline({
            path: flightPlanCoordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        flightPath.setMap(map);        
    console.log("AJAX level request was successful");
    },
    error: function(){
    console.log("AJAX level request was a failure");
    }
});

编码愉快！！！