Google API'da MySql ve PHP'den veri alarak araç hareket ettikçe büyüyen çoklu çizgi çizme


9

MySQL ve PHP'den veri alarak araba ile animasyon hareket ederken (bu sitede olduğu gibi: http://econym.org.uk/gmap/example_cartrip2.htm ) çoklu çizgiyi google Map'de göstermek istedim . Bunun için Google API öğretici Polyline kod başvurdu . Ayrıca aşağıdaki gibi benim SQL bu veri almış: .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() {}

.php dosyası:

<?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();

?>

Ama şimdi ben 1. referanslar sitesinde göstermek gibi animasyon ile çoklu çizgi göstermek istedim. Herhangi biri bana bazı referanslar önerebilir veya aynı bana yardımcı olabilir. Doğru olan ancak http://econym.org.uk/gmap/example_cartrip2.htm'de olduğu gibi animasyon istiyorum bu sonucu alıyorum Bu resim açıklamasını buraya girin sefer başlık ve açıklama bölümümün anlaşıldığını umuyorum.

Yanıtlar:


2

Polylinepath için Maps Javascript API dokümanlarından ( özelliği not edin ) :

Polyline'ın sıralı koordinat dizisi. Bu yol, basit bir LatLng dizisi veya LatLngs'nin bir MVCArray öğesi kullanılarak belirtilebilir. Basit bir dizi iletirseniz, bu dizinin bir MVCArray'e dönüştürüleceğini unutmayın MVCArray'de LatLngs ekleme veya kaldırma, haritadaki çoklu çizgiyi otomatik olarak güncelleyecektir .

Bunu bilerek, şöyle denerdim:

// 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.
}

Sonradan düşünüldüğünde, her GPS darbesi iki yerde idare etmeniz / ihtiyaç duyabileceğiniz bir olay gönderiyor olmalıdır. İlk olarak, araçların konumlarını süresiz olarak saklamak istiyorsanız, bunları sunucu tarafına almanız ve veritabanınıza aktarmanız gerekir. Ancak, bir aracın seyahat ederken bir çizgi çizmesini istiyorsanız, bu işlevselliği istemcide tutabilirsiniz.


Cevabınız için teşekkürler ama, benim veritabanı ieMySQL veri deposu olacak. Canlı izleme istemiyorum ama aracımın nereye taşındığının geçmişi, bunun için bu örnekteki gibi parça animasyonu göstermek istedim ( econym.org.uk/gmap/example_cartrip2.htm ). Saklanan verilere animasyon eklemek istedim. burada araba resmi (yani png) hareket eder ve bu görüntü ilk bağlantıdaki gibi hareket ettikçe araç izi çizilir.
Pari
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.