Vẽ đa tuyến phát triển khi xe di chuyển bằng cách lấy dữ liệu từ MySql và PHP trong Google API


9

Tôi muốn hiển thị đa tuyến trên google Map khi xe di chuyển bằng hình động (như trong trang web này: http://econymous.org.uk/gmap/example_cartrip2.htm ) bằng cách lấy dữ liệu từ MySQL và PHP. Vì vậy, tôi đã giới thiệu mã từ Polyline hướng dẫn API của Google . Tôi cũng đã lấy dữ liệu này từ SQL của mình như sau: .html

function load() {
    var point;
                    var flightPlanCoordinates=new Array();
            var map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(18.33, 73.55),
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                 },
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                }
            });

            downloadUrl("xmltry.php", function(data) {
        var xml = data.responseXML;

        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lon")));
            flightPlanCoordinates[i]=point;
          }
          var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);

      });

        }

        function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }
    function doNothing() {}

tập tin .php:

<?php
//require("phpsqlajax_dbinfo.php");
include 'common_db.inc';
// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node); 

// Opens a connection to a MySQL server

$connection=mysql_connect ("$dbserver", "$dbuser", "$dbpass");
if (!$connection) {  die('Not connected : ' . mysql_error());} 

// Set the active MySQL database

$db_selected = mysql_select_db($dbname, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
} 

// Select all the rows in the markers table

$query = "SELECT  `lat`, `lon` FROM current_location Where Device_ID='HGS1005'";
$result = mysql_query($query);
if (!$result) {  
  die('Invalid query: ' . mysql_error());
} 

header("Content-type: text/xml"); 

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){  
  // ADD TO XML DOCUMENT NODE  
  $node = $dom->createElement("marker");  
  $newnode = $parnode->appendChild($node);  
  $newnode->setAttribute("lat", $row['lat']);  
  $newnode->setAttribute("lon", $row['lon']);  
  } 

echo $dom->saveXML();

?>

Nhưng bây giờ tôi muốn hiển thị đa tuyến với hình ảnh động như hiển thị trong trang tham chiếu đầu tiên. Có ai có thể gợi ý cho tôi một số tài liệu tham khảo hoặc giúp tôi không. Tôi nhận được kết quả này là chính xác nhưng muốn có hình ảnh động như trong http://econymous.org.uk/gmap/example_cartrip2.htmlm nhập mô tả hình ảnh ở đây Hy vọng lần này phần tiêu đề và mô tả của tôi được hiểu.

Câu trả lời:


2

Từ các tài liệu API Javascript của Maps cho Polyline (lưu ý thuộc pathtính) :

Trình tự tọa độ của Polyline. Đường dẫn này có thể được chỉ định bằng cách sử dụng một mảng LatLngs đơn giản hoặc MVCArray của LatLngs. Lưu ý rằng nếu bạn vượt qua một mảng đơn giản, nó sẽ được chuyển đổi thành MVCArray Chèn hoặc xóa LatLngs trong MVCArray sẽ tự động cập nhật đa tuyến trên bản đồ .

Biết điều đó, tôi sẽ thử nó như thế này:

// I assume you've got your GPS signal pumping updates to your client.
// Insert a new GPS point into your Polyline's point array.
function OnGpsPulse(newLat, newLon)
{
  // Insert a new point at the end of the LatLng Array.
  pointIndex = flightPlanCoordinates.length;      
  flightPlanCoordinates[pointIndex]=new google.maps.LatLng(newLat, newLon);

  // And the line should automatically update in the map.
}

Do đó, mỗi xung GPS sẽ gửi một sự kiện mà bạn có thể cần / muốn xử lý ở hai nơi. Đầu tiên, nếu bạn muốn lưu trữ vị trí của xe vô thời hạn, bạn sẽ cần thu thập chúng ở phía máy chủ và đẩy chúng vào cơ sở dữ liệu của bạn. Tuy nhiên, nếu bạn chỉ muốn một chiếc xe vẽ một đường trong khi nó di chuyển, bạn có thể giữ chức năng đó trong máy khách.


Cảm ơn đã trả lời nhưng, tôi sẽ có kho lưu trữ dữ liệu trong cơ sở dữ liệu của mình tức là MyMyQuery. Tôi không muốn theo dõi trực tiếp nhưng lịch sử về nơi chiếc xe của tôi đã di chuyển, vì tôi muốn hiển thị hình ảnh động của đường đua như trong ví dụ này ( econymous.org.uk/gmap/example_cartrip2.htmlm ). Tôi muốn thêm hình ảnh động vào dữ liệu được lưu trữ. trong đó hình ảnh xe hơi (tức là png) sẽ di chuyển và đường đua xe sẽ vẽ khi hình ảnh này di chuyển như trong liên kết đầu tiên.
Pari
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.