Question

我正在开发php.for中的一个学校管理应用程序，我需要开发一个模块，如校车跟踪。但我是这个主题的新手。我经历了这么多次搜索。但没有运气。

<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>

我找到了这个代码。但是这段代码显示了我的位置地图。但我想跟踪一个公共汽车位置。我可以获得一个公共汽车的位置。哪个跟踪器设备更适合使用？

提前致谢

Answer 1

幸运的是，我设法实现了一个类似的应用程序。点击此处：Tracking app

。（使用32003693作为凭证，使用6作为货运ID）。我用这个脚本来获取位置： //我省略了代码的某些部分

＆＃13;

< 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>

＆＃13;

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

＆＃13;

＆＃13; GPS设备是首选。智能手机应该做到这一点。如果遇到任何困难，请告诉我。

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

现在，我在页面中添加了一个有两个输入的表单。一个是纬度输入，另一个是纬度输入。

javascript获取位置并设置坐标。检查评论。现在，获取位置。只需将表单提交给php脚本，servlet等。

如果您托管了应用，则任何启用了位置的设备都可以使用。

SELECT  CHAR(COLUMN1                                   
   ,CHAR('|'),COLUMN2   
   ,CHAR('|'),COLUMN3  
   ,CHAR('|'),COLUMN4  
   ,CHAR('|'),COLUMN5)
FROM TABLEA  
WITH UR;

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) {
	document.getElementById("lat").value =position.coords.latitude;//set the value for latitude
	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;
    }
}

让我知道它是如何运作的。

玩得开心。

Answer 4

以下是在Google地图上绘制标记的方法。现在您可以读取设备坐标，您可以将坐标提交给服务器（也许可以尝试jquery）。将此数据保存在数据库中。然后检索坐标并使用下面的代码段。另外，请注意地图将要求您获取API密钥。检查代码段以获取链接。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

更新我的进度......

校车跟踪gps网络应用程序

4 个答案: