Google지도에서 마커를 표시하는 방법 mysql에서 데이터를 검색

Question

나는 차량 추적 시스템에서 일하고 있습니다. 여기에 MySql에 GPS 데이터가 저장되어 있습니다. 내가해야 할 일은 Google지도에 마커를 표시하는 것입니다. 매초마다 GPS 데이터를 나타내는 모든 행 데이터. 여기 내 문제는 매초마다 Google지도에 마커를 표시 할 수 없다는 것입니다.

참고 : js의 타이머 기능을 사용하고 있습니다. 왜 각 초마다 변수가 할당되고 그 변수는 db의 모든 두 번째 데이터와 일치합니다.

<script type="text/javascript"> 
<?php $vehi = 1; ?> 

window.setInterval(function initialize() 
{ 

<?php 

    $sql= mysql_query("select * from maploca where id='$vehi'"); 
    $sqlnm = mysql_num_rows($sql); 
    $sqlqry=mysql_fetch_object($sql); 

?> 


    <?php $vehi++;?> 
    var json = [ 
       { "lat":<?php echo $sqlqry->latitude; ?>, 
        "lng":<?php echo $sqlqry->longitude; ?> }] 
    var latlng = new google.maps.LatLng(<?php echo $sqlqry->latitude;?>,<?php echo $sqlqry->longitude;?>); 

    var myOptions = { 
    zoom: 18, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var polylineCoordinates = [ 
    new google.maps.LatLng(<?php echo $sqlqry->latitude;?>,<?php echo $sqlqry->longitude;?>)]; 
    var polyline = new google.maps.Polyline({ 
    path: polylineCoordinates, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2, 
    editable: true 
    }); 

    polyline.setMap(map); 
    for (var i = 0, length = json.length; i < length; i++) { 
    var data = json[i], 
      latLng = new google.maps.LatLng(data.lat, data.lng); 

     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map 
     }); 
    } 
}, 1000); 

</script> 

Answer 1

이 코드는 작동하지 않습니다

이

내 코드입니다. PHP와 JS를 섞어서는 안된다.

(JS) 및 데이터 가져 오기 (PHP)를위한 2 개의 분리 된 파트를 만드는 것이 좋습니다.

window.setInterval은 timeparam에 따라 좌표를 반환하는 PHP 페이지를 호출해야합니다. Javascript는 자체 변수 (PHP 변수가 아님)를 반복하고 ajax php 웹 페이지에서 새 마커를 추가하여 호출합니다.

ex. Add multiple markers to google maps from json

Answer 2

타이머가 매초마다 틱하거나 새로 고침 할 때마다 AJAX를 사용해야합니다. 분명히 나중에 좋은 생각이 아닙니다. 이유는 타이머 틱이 발생할 때마다 (첫 번째로드에서만) 페이지의 PHP가 실행되지 않기 때문입니다.

핀을 표시하는 데 필요한 위도 경도 데이터를 반환하는 두 번째 파일을 작성해야합니다.

예 : (사용 jQuery를)

LATLONG 서비스 : (/ajax/getlatlong.php?vid=1)

<?php ob_start(); 

    header("Content-Type: application/javascript"); 

    /* 
    IMPORTANT DO SOME FUNCTION HERE TO MAKE SURE THE REQUEST 
    IS COMING FROM YOUR SITE AND NOT SOMEONE STEALING YOUR 
    DATA (session var, etc) 
    */ 

    $sql= mysql_query("select * from maploca where id='" . 
     mysql_real_escape_string($_GET['vid']) . "'"); 

    $sqlnm = mysql_num_rows($sql); 

    $ll = array(); 

    while ($sqlqry = mysql_fetch_object($sql)) { 
     $ll[] = "{". 
        "\"lat\": " . $sqlqry->latitude . ", " . 
        "\"lng\": " . $sqlqry->longitude . 
       "}"; 
    } 


    echo $_GET['callback'] . "([" . implode(",", $ll) . "]);"; 
?> 

지도 페이지 : 그런

이

<script type="text/javascript"> 
    <?php $vehi = 1; ?> 

    var myGM = function() { 
     var me = this; 

     <?php 
      $sql= mysql_query("select * from maploca where id='$vehi'"); 
      $sqlnm = mysql_num_rows($sql); 
      $sqlqry=mysql_fetch_object($sql); 
     ?> 

     <?php $vehi++;?> 
     var json = [{ 
      "lat":<?php echo $sqlqry->latitude; ?>, 
      "lng":<?php echo $sqlqry->longitude; ?> 
     }]; 

     var latlng = new google.maps.LatLng(json[0].lat,json[0].lng); 

     var myOptions = { 
      zoom: 18, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var polylineCoordinates = [latlng]; 

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

     polyline.setMap(map); 

     window.setInterval(function() { 
      $.getJSON("/ajax/getlatlong.php?vid=1&callback=?") 
       .done(function (data) { 
        me.updateMap(data); 
       }); 
     }, 2000); 

     this.updateMap = function(data) { 

      $(data).each(function() { 
       var latLng = new google.maps.LatLng(this.lat, this.lng); 

       // Creating a marker and putting it on the map 
       var marker = new google.maps.Marker({ 
        position: latLng, 
        map: me.map 
       }); 
      }); 

     } 
    } 

    window.onload = function() { 
     window.trackingMap = new myGM(); 
    } 

</script> 

뭔가 트릭을해야합니다