スクールバストラッキングGPSウェブアプリ

Question

私は学校バストラッキングのような1つのモジュールを開発する必要があるphp.forで1つの学校管理アプリケーションを開発しています。しかし、私はこのトピックを初めて習得しました。 私は非常に多くの検索を行っています。しかし、運はありません。

<script> 
    var watchID = null; 
    $(document).ready(function() { 
     var optn = { 
      enableHighAccuracy: true, 
      timeout: Infinity, 
      maximumAge: 0 
     }; 
     if (navigator.geolocation) 
      navigator.geolocation.watchPosition(success, fail, optn); 
     else 
      $("p").html("HTML5 Not Supported"); 
     $("button").click(function() { 

      if (watchID) 
       navigator.geolocation.clearWatch(watchID); 

      watchID = null; 
      return false; 
     }); 

    }); 

    function success(position) { 
     var googleLatLng = new google.maps.LatLng(position.coords.latitude, 
      position.coords.longitude); 
     var mapOtn = { 
      zoom: 10, 
      center: googleLatLng, 
      mapTypeId: google.maps.MapTypeId.ROAD 
     }; 

     var Pmap = document.getElementById("map"); 

     var map = new google.maps.Map(Pmap, mapOtn); 
     addMarker(map, googleLatLng); 
    } 

    function addMarker(map, googleLatLng, title, content) { 
     var markerOptn = { 
      position: googleLatLng, 
      map: map, 
      title: title, 
      animation: google.maps.Animation.DROP 
     }; 

     var marker = new google.maps.Marker(markerOptn); 

     var infoWindow = new google.maps.InfoWindow({ 
      content: content, 
      position: googleLatLng 
     }); 
     google.maps.event.addListener(marker, "click", function() { 
      infoWindow.open(map); 
     }); 
    } 
</script> 

私は、このコードは私が追跡デバイスが使用することが好ましいbus.andの位置を取得することができますlocation.howバスを追跡する私のlocation.butのマップを示している？このcode.butを見つけましたか

おかげで、事前に

Answer 1

は幸いなことに、私は同様のアプリを実装するために管理しています。ここで確認してください：Tracking app

（資格情報として32003693、貨物IDとして6を使用してください）。 は私が場所を取得するには、このスクリプトを使用： //私は、GPSデバイスが好まれているコード

< script type = "text/javascript" > 
 
    $(document).ready(function() { 
 
    if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition(showLocation); 
 
     //alert("Geotrack working..."); 
 
    } else { 
 
     $('#removeMessages').html('This app is not supported by this browser or OS.'); 
 
    } 
 
    }); 
 

 

 
//setInterval(showLocation(position),10000); 
 

 
function showLocation(position) { 
 
    var latitude = position.coords.latitude; 
 
    var longitude = position.coords.longitude; 
 
    var freightid = <?php echo $freightid?>; //this is used to identify the freight 
 
    $.ajax({ 
 
    type: 'POST', 
 
    url: 'controllers/getLocation.php', //php to save the tracked locations 
 
    data: 'latitude=' + latitude + '&freightid=' + freightid + '&longitude=' + longitude, //data with coordinates 
 
    dataType: 'json', 
 
    success: function(msg) { 
 
     if (msg) { 
 
     $("#location").html(msg.locationname); 
 
     $("#lat").html(msg.lat); 
 
     $("#lgt").html(msg.lgt); 
 
     initializeMap(msg.lat, msg.lgt, msg.locationname, msg.locationname); 
 
     } else { 
 
     $("#location").html('Not Available'); 
 
     initializeMap(0, 0, "Undefined location", "Undefined country"); //where I initialize the map 
 
     } 
 

 
     setTimeout(function() { 
 
     showLocation(position); //this will send request again and again after 3 seconds or time you want. For your case i set it seconds for patients sake 
 
     }, 1800); 
 

 
    } 
 
    }); 
 
} < 
 
/script> 
 

 
<!-- script to initialize the map and place a maker on the location obtained--> 
 
< 
 
script 
 
src = "https://maps.google.com/maps/api/js?key=youur api key" 
 
type = "text/javascript" > < /script> < 
 
    script type = "text/javascript" > 
 
    //initializeMap(); 
 
    function initializeMap(custom_lat, custom_lng, title, address) { 
 
    var locations = [ 
 

 
     [address, custom_lat, custom_lng, 2] 
 
    ]; 
 

 
    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
     zoom: 8, 
 
     center: new google.maps.LatLng(-0.2842285, 36.0729164), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
     var indetify = locations[i][3]; 
 
     var iconset = "http://ruralshores.com/assets/library_maps.png" 
 
     // alert("Identify:"+indetify); 
 
     if (indetify == 1) { 
 
     iconset = "../dist/images/map/1.png"; 
 
     } else { 
 
     iconset = "../dist/images/map/2.png"; 
 
     } 
 
     marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map, 
 
     animation: google.maps.Animation.DROP, 
 

 
     icon: iconset, 
 
     optimized: false 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
      infowindow.setContent(locations[i][0]); 
 
      infowindow.open(map, marker); 
 
      marker.setAnimation(google.maps.Animation.BOUNCE); 
 
     } 
 
     })(marker, i)); 
 
    } 
 

 
    } < 
 
    /script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

の一部を省略しています。スマートフォンはそのトリックを行う必要があります。 問題が発生した場合は、ご連絡ください。

Answer 2

このスニペットを実行して、ジオロケーションがデバイス上で動作しているかどうかをテストします。 w3school geolocationでこのAPIのガイダンスを確認できます。今

var x = document.getElementById("demo"); 
 

 
function getLocation() { 
 
    if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition(showPosition, showError); 
 
    } else { 
 
     x.innerHTML = "Geolocation is not supported by this browser."; 
 
    } 
 
} 
 

 
function showPosition(position) { 
 
    x.innerHTML = "Latitude: " + position.coords.latitude + 
 
    "<br>Longitude: " + position.coords.longitude; 
 
} 
 

 
function showError(error) { 
 
    switch(error.code) { 
 
     case error.PERMISSION_DENIED: 
 
      x.innerHTML = "User denied the request for Geolocation." 
 
      break; 
 
     case error.POSITION_UNAVAILABLE: 
 
      x.innerHTML = "Location information is unavailable." 
 
      break; 
 
     case error.TIMEOUT: 
 
      x.innerHTML = "The request to get user location timed out." 
 
      break; 
 
     case error.UNKNOWN_ERROR: 
 
      x.innerHTML = "An unknown error occurred." 
 
      break; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p>Click the button to get your coordinates.</p> 
 

 
<button onclick="getLocation()">Try It</button> 
 

 
<p id="demo"></p> 
 

 

 
</body> 
 
</html>

Answer 3

、私は2つの入力を持っている私たちのページにフォームを追加しました。緯度の入力と緯度の入力。

JavaScriptが位置を取得し、座標を設定します。コメントを確認してください。 今、場所を取得します。フォームをPHPスクリプト、サーブレットなどに送信してください。

アプリケーションをホストすると、有効になっているデバイスがあれば動作します。

var x = document.getElementById("demo"); 
 

 
function getLocation() { 
 
    if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition(showPosition, showError); 
 
    } else { 
 
     x.innerHTML = "Geolocation is not supported by this browser."; 
 
    } 
 
} 
 

 
function showPosition(position) { 
 
\t document.getElementById("lat").value =position.coords.latitude;//set the value for latitude 
 
\t document.getElementById("lgt").value = position.coords.longitude;//set value for logitude 
 
    x.innerHTML = "Latitude: " + position.coords.latitude + 
 
    "<br>Longitude: " + position.coords.longitude; 
 
} 
 

 

 

 
function showError(error) { 
 
    switch(error.code) { 
 
     case error.PERMISSION_DENIED: 
 
      x.innerHTML = "User denied the request for Geolocation." 
 
      break; 
 
     case error.POSITION_UNAVAILABLE: 
 
      x.innerHTML = "Location information is unavailable." 
 
      break; 
 
     case error.TIMEOUT: 
 
      x.innerHTML = "The request to get user location timed out." 
 
      break; 
 
     case error.UNKNOWN_ERROR: 
 
      x.innerHTML = "An unknown error occurred." 
 
      break; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p>Click the button to get your coordinates.</p> 
 

 
<button onclick="getLocation()">Try It</button> 
 

 
<!-- This show the location --> 
 
<p id="demo"></p> 
 

 
<form action="" method="post"> 
 
<input type="text" id="lat"> 
 
<input type="text" id="lgt"> 
 
<button type="submit" >send coordinates</button> 
 
</form> 
 

 
</body> 
 
</html>

私はそれがどのように動作するかを知ってみましょう。

楽しいコーディングがあります。

Answer 4

Googleマップにマーカーを描画する方法は次のとおりです。 これでデバイスの座標を読み取ることができました。座標をサーバーに送信できます（多分jqueryを試してみてください）。このデータをデータベースに保存します。次に、座標を取得し、下のスニペットを使用します。また、マップにはAPIキーを取得する必要があることに注意してください。スニペットでリンクを確認してください。

function initMap() { 
 
     var myLatLng = {lat: -0.2842285, lng: 36.0729164};//feed coordinates here from db 
 

 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 4, 
 
      center: myLatLng 
 
     }); 
 

 
     var marker = new google.maps.Marker({ 
 
      position: myLatLng, 
 
      map: map, 
 
      title: 'Bus Location!' 
 
     }); 
 
     }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Simple markers</title> 
 
    <style> 
 
     /* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
 
    <!--get YOUR_API_KEY here https://developers.google.com/maps/documentation/javascript/get-api-key--> 
 
    </script> 
 
    </body> 
 
</html>

...あなたの進捗状況をPHPで