与谷歌地图API

-1

使用MySQL的数据，我用含有HTML，PHP和JavaScript和MySQL中命名的数据包含按日期排序GPS信息表中的PHP文件的工作。我正在使用以下代码，因此用户可以在表单中键入日期。与谷歌地图API

<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); 
}

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

我解决不了这个最后一个问题。任何帮助，将不胜感激。

来源

2017-05-26 Eduardo

你的代码是易受[** SQL注入**]（https://en.wikipedia.org/wiki/SQL_injection）攻击。你应该使用[** mysqli **]（https://secure.php.net/manual/en/mysqli.prepare.php）或[** PDO **]（https://secure.php.net/ manual/en/pdo.prepared-statements.php）准备带有绑定参数的语句，如[**这篇文章**]所述（https://stackoverflow.com/questions/60174/how-can-i-prevent-sql步喷射功能于PHP）。 –

当您从查询的检查结果，创建一个JavaScript变量，从initmap功能或另一个读它。如果您需要动态更新，使用jQuery请求数据，将其作为一个JSON给客户端，并解析/过程中它使用JavaScript。 –

@Sakura木之本我怎样才能创建查询包含结果的JavaScript变量和initMap看了吗？对不起，我有点新手到Javascript和PHP！ – Eduardo

给你形成ID如下：

<form id = "form">

给ID即使输入栏如下（记住输入标记是一个独立的标签，它并没有结束标记）

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

声明initMap（）方法外的变量“地图”如示于下面的脚本并创建一个名为“data_fetcher.php”单独的文件成为通过它可以如$ _POST [访问日期值到AJAX调用'date_value']在date_fetcher.php文件中，然后编写逻辑来获取lat，lng da ta对应于日期。一旦所获得的结果，存储在数组中，然后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"); 
    } 
});

编码愉快！

来源

2017-05-26 16:45:00

不多到AJAX，但一直在努力的最后几天，终于成功了。杰出的回应。 – Eduardo

与谷歌地图API

回答

相关问题