使用 ajax 和 setTimeOut 更新地图标记

update map markers with ajax and setTimeOut

提问人:Ben 提问时间:1/9/2017 最后编辑:Ben 更新时间:1/11/2017 访问量:327

问:

我有一个设置,其中包含位置标记,尽管我正在努力通过以下方式让标记每 x 秒更新一次Google map apidrivers(multiple)ajax/php

这就是我目前所拥有的。有人能看到我做错了什么吗?

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

更新: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);

}
javascript php jquery ajax google-maps-api-3

评论

0赞 Emmanuel Delay 1/9/2017
试试这个: setTimeout(fetchDrivers, 10000);不确定它是否解决了所有问题,但必须这样做
0赞 Ben 1/9/2017
谢谢。这就是 “window.setTimeout(fetchDrivers(), 10000);” 的作用
0赞 geocodezip 1/9/2017
您如何初始化 ?请提供一个最小的可重现示例来演示该问题。map
0赞 Ben 1/9/2017
更新了 init 函数
0赞 Ben 1/10/2017
有人有什么想法吗??

答: 暂无答案