使用ajax和setTimeOut更新地图标记

时间:2017-01-09 11:13:49

标签: javascript php jquery ajax google-maps-api-3

我有一个Google map api设置,其中包含drivers(multiple)个位置的标记,但我很难通过ajax/php

让每个x秒更新标记

这是我到目前为止所拥有的。任何人都可以看到我做错了吗?

我搜索了许多示例和教程。我还没有找到能满足我需要的东西。

更新:Ajax确实成功地从PHP获取数据只是没有移动标记......可能数据格式错误了吗?

更新:包含init()代码

PHP代码:

    $sqld = "SELECT * FROM rwxoq_Drivers";
    $resultd = mysqli_query($conn, $sqld);
    while($rowd = mysqli_fetch_assoc($resultd)) {
    list($time, $lat, $long) = explode("*", $rowd{LastGPS});
    if ($time > (time() - 600)) {

            $sqlu = "SELECT * FROM rwxoq_users WHERE username = '".$rowd{Driver_ID}."'";
            $resultu = mysqli_query($conn, $sqlu);
            while($rowu = mysqli_fetch_assoc($resultu)) {

                    $driver_id = $rowd{Driver_ID};
                    $driver_name = $rowu{name};
                    $driver_contact = $rowd{Phone};
                    $dir = "/var/www/autoflora_net/driver/profile/";
//echo $dir . $driver_id.'/png';
                    if (file_exists($dir . $driver_id.'.png')) {
                            $driver_img = '/driver/profile/'.$driver_id.'.png';
                    } else {
                            $driver_img = '/driver/profile/noimage.png';
                    }

                    $count++;
                    if ($count > 1) echo ", ";

                    echo '["'.$driver_id.'", "'.$driver_name.'", "'.$driver_contact.'", "'.$driver_img.'", "'.$lat.'", "'.$long.'"]';
            }
    }
}

JS代码:

            function initialize() {
    var options = {
     componentRestrictions: {country: "au"}
    };
                    directionsDisplay = new google.maps.DirectionsRenderer();
                    var melbourne = new google.maps.LatLng(-31.953512, 115.857048);
                    var myOptions = {
                            zoom:12,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            center: melbourne
                    }

                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    directionsDisplay.setMap(map);
geocoder = new google.maps.Geocoder();

 for (d = 0; d < drivers.length; d++) {
    drivermarkers(drivers, d);
//usleep(1000000);
  }

 for (i = 0; i < locations.length; i++) {
     geocodeAddress(locations, i);
 //usleep(1000000);
  }

            }


function fetchDrivers (){

var markers = [];

$.ajax({
    url:    "driver/drivergps.php",
    type : 'GET',
    dataType: 'text',
    success : function(data) {

     // Loop through our array of markers & place each one on the map  
        for( i = 0; i < data.length; i++ ) {
            var myLatlng = new google.maps.LatLng(data[i][4],data[i][5]);
            var marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  title: 'Hello World!'
              }); /* <----- AT THIS POINT, MARKER IS CREATED AND PLACED ON THE MAP BY SETTING "map" PROPERTY */
           markers.push(marker); /* <----- HERE YOU ARE STORING THEM, AND YOU CAN ACCESS THEM LATER IN YOUR FUNCTION */

        }
console.log(data);
    }
    ,
    error: function(){
        /// traiter les erreur
    },
    async : true
});

//window.setTimeout(fetchDrivers(), 10000);


}

window.setTimeout(fetchDrivers(), 10000);

function drivermarkers(drivers, d) {
  var id = drivers[d][0];
  var name = drivers[d][1];
 var contact = drivers[d][2];
 var img = drivers[d][3];
 var lat = drivers[d][4];
 var long = drivers[d][5];

   var drivermarker = new google.maps.Marker({
      label: id,
      icon: '/images/Furgoneta.png',
      map: map,
      position: new google.maps.LatLng(drivers[d][4], drivers[d][5]),
      title: name,
      animation: google.maps.Animation.DROP,
    })
   infoWindow(drivermarker, map, id, name, img);


  bounds.extend(drivermarker.getPosition());
    map.fitBounds(bounds);

}

0 个答案:

没有答案