使用ajax制作动画标记

时间：2015-05-18 22:37:08

标签： javascript ajax json google-maps

我无法弄清楚如何解决这个问题。

我从json文件中获取带有ajax的数据，这个json文件包含3个标记，称为“拾取”，“dropoff”和“motomarker”，此文件每5秒获取一次新数据，并且唯一的变化位置坐标是“Motomaker”。

当这个位置发生变化时，“motomarker”没有获得新的位置，它会在新的坐标上创建一个新的位置。

json看起来像这样

{"origin": {"lat": 19.4292187, "lon": -99.156495199999995}, "dropoff": {"lat": 19.4290716, "lon": -99.156278299999997, }, "driver": {"lat": 19.414372254556561, "lon": -99.154668594441588, "driver_name": "User_test"}}

我的代码就是这个

<script type="text/javascript">
    var mapOptions = {
        zoom: 14,
        center: new google.maps.LatLng(19.420823, -99.186716)
    };

    // Creating the map
    map = new google.maps.Map(document.getElementById('map-container'), mapOptions);
    minutes = 30;
    seconds = 0;
    hours = 0;

    function asyncRequest(url, data, method, successHandler, errorHandler) {
        $.ajax({
            url: url,
            type: method,
            dataType: "json",
            success: successHandler,
            error: errorHandler,
            data: data,
            xhrFields: {
                withCredentials: true
            }
        });
    }

    function refreshGodViewJSON() {
        var date = new Date(2013, 09, 22, 16, minutes, seconds)
            //seconds = (seconds + 30) % 60;
            //if (seconds == 0) {
        minutes = (minutes + 3) % 60
            //}

        if (minutes == 0) {
            hours = (hours + 1) % 60
        }

        url = "/2/delivery/track?tracking_id={{tracking_id}}&f=json"
        var successHandler = function (response) {
            if (response.status == "Error") {

            }
            if (response.length == 0) {
                return;
            }
            var json = response;
            SlidingMarker.initializeGlobally();

            if (json.driver.driver_name != "No_driver") {
                var driver_lat = json.driver.lat;
                var driver_lon = json.driver.lon;
                var driver_icon = new google.maps.MarkerImage(
                    "/static/img/moto99.png",
                    null, /* size is determined at runtime */
                    null, /* origin is 0,0 */
                    null, /* anchor is bottom center of the scaled image */
                    new google.maps.Size(50, 50)
                );
                var pickup_lat = json.origin.lat;
                var pickup_lon = json.origin.lon;
                var pickup_icon = new google.maps.MarkerImage(
                    "/static/img/pin_delivery_origin.png",
                    null, /* size is determined at runtime */
                    null, /* origin is 0,0 */
                    null, /* anchor is bottom center of the scaled image */
                    new google.maps.Size(80, 68)
                );

                var dropoff_lat = json.dropoff.lat;
                var dropoff_lon = json.dropoff.lon;
                var dropoff_icon = new google.maps.MarkerImage(
                    "/static/img/pin_delivery_destination.png",
                    null, /* size is determined at runtime */
                    null, /* origin is 0,0 */
                    null, /* anchor is bottom center of the scaled image */
                    new google.maps.Size(80, 68)
                );

                // Adding a new marker for the object
                var marker1 = new google.maps.Marker({
                    position: new google.maps.LatLng(pickup_lat, pickup_lon),
                    map: map,
                    icon: pickup_icon,
                });
                var marker2 = new google.maps.Marker({
                    position: new google.maps.LatLng(dropoff_lat, dropoff_lon),
                    map: map,
                    icon: dropoff_icon,
                });
                //if ("driver_lat" in sessionStorage) {
                //console.log(old_lat);
                //console.log(old_lon);
                //  var latLng = new google.maps.LatLng(driver_lat, driver_lon)
                //  markermoto.setPosition(latLng);
                //} else {
                sessionStorage["driver_lat"] = driver_lat;
                sessionStorage["driver_lon"] = driver_lon;
                var old_lat = localStorage.driver_lat;
                var old_lon = localStorage.driver_lon;
                var markermoto = new google.maps.Marker({
                    map: map,
                    icon: driver_icon,
                });
                if (old_lat != driver_lat && old_lon != driver_lon) {
                    var latLng = new google.maps.LatLng(driver_lat, driver_lon)
                    markermoto.setPosition(latLng);
                }


            } else {
                var pickup_lat = json.origin.lat;
                var pickup_lon = json.origin.lon;
                var pickup_icon = new google.maps.MarkerImage(
                    "/static/img/pin_delivery_origin.png",
                    null, /* size is determined at runtime */
                    null, /* origin is 0,0 */
                    null, /* anchor is bottom center of the scaled image */
                    new google.maps.Size(80, 68)
                );

                var dropoff_lat = json.dropoff.lat;
                var dropoff_lon = json.dropoff.lon;
                var dropoff_icon = new google.maps.MarkerImage(
                    "/static/img/pin_delivery_destination.png",
                    null, /* size is determined at runtime */
                    null, /* origin is 0,0 */
                    null, /* anchor is bottom center of the scaled image */
                    new google.maps.Size(80, 68)
                );

                // Adding a new marker for the object
                var marker1 = new google.maps.Marker({
                    position: new google.maps.LatLng(pickup_lat, pickup_lon),
                    map: map,
                    icon: pickup_icon,
                });
                var marker2 = new google.maps.Marker({
                    position: new google.maps.LatLng(dropoff_lat, dropoff_lon),
                    map: map,
                    icon: dropoff_icon,
                });
            }

        };

        var errorHandler = function () {

        };
        asyncRequest(url, {}, "GET", successHandler, errorHandler)
    }
    $(document).ready(function () {
        refreshGodViewJSON();
        setInterval('refreshGodViewJSON()', 5000);
    });

1 个答案:

答案 0 :(得分：1)

创建一个全局变量来保存对y <- rle(x) rep.int(1:length(y$values), times = y$lengths) 的引用：

markermoto

如果标记不存在或者没有var markermoto; 方法，请创建它，如果它存在且具有setPosition方法，则移动现有标记。 / p> 

setPosition

proof of concept fiddle

代码段：

＆＃13;
＆＃13; 
if (!markermoto || !markermoto.setPosition) {
    var latLng = new google.maps.LatLng(driver_lat, driver_lon);
    markermoto = new google.maps.Marker({
       map: map,
       position: latLng,
       icon: driver_icon
    });
} else {
    var latLng = new google.maps.LatLng(driver_lat, driver_lon);
    markermoto.setPosition(driverPosn);
}
＆＃13; 
var map;
var minutes, seconds, hours;
var updateCnt = 0;
var markermoto;

function initialize() {
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(19.420823, -99.186716)
  };
  // Creating the map
  map = new google.maps.Map(document.getElementById('map-container'), mapOptions);
  minutes = 30;
  seconds = 0;
  hours = 0;
}
google.maps.event.addDomListener(window, 'load', initialize);

function asyncRequest(url, data, method, successHandler, errorHandler) {
  $.ajax({
    url: url,
    type: method,
    dataType: "json",
    success: successHandler,
    error: errorHandler,
    data: data,
    xhrFields: {
      withCredentials: true
    }
  });
}
var successHandler = function(response) {
  if (response.status == "Error") {

  }
  if (response.length == 0) {
    return;
  }
  var json = response;

  // simulate motion
  updateCnt++;
  var driverPosn = google.maps.geometry.spherical.interpolate(new google.maps.LatLng(json.origin.lat, json.origin.lon), new google.maps.LatLng(json.dropoff.lat, json.dropoff.lon), ((updateCnt % 50) / 50));

  if (json.driver.driver_name != "No_driver") {
    var driver_lat = json.driver.lat;
    var driver_lon = json.driver.lon;
    var driver_icon = new google.maps.MarkerImage(
      "http://maps.google.com/mapfiles/ms/icons/blue.png",
      null, /* size is determined at runtime */
      null, /* origin is 0,0 */
      null, /* anchor is bottom center of the scaled image */
      null /* new google.maps.Size(50, 50) */ );
    var pickup_lat = json.origin.lat;
    var pickup_lon = json.origin.lon;
    var pickup_icon = new google.maps.MarkerImage(
      "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      null, /* size is determined at runtime */
      null, /* origin is 0,0 */
      null, /* anchor is bottom center of the scaled image */
      null /* new google.maps.Size(80, 68) */ );

    var dropoff_lat = json.dropoff.lat;
    var dropoff_lon = json.dropoff.lon;
    var dropoff_icon = new google.maps.MarkerImage(
      "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
      null, /* size is determined at runtime */
      null, /* origin is 0,0 */
      null, /* anchor is bottom center of the scaled image */
      null /* new google.maps.Size(80, 68) */ );

    // Adding a new marker for the object
    var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(pickup_lat, pickup_lon),
      map: map,
      icon: pickup_icon
    });
    var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(dropoff_lat, dropoff_lon),
      map: map,
      icon: dropoff_icon
    });
    if (!markermoto || !markermoto.setPosition) {
      var latLng = new google.maps.LatLng(driver_lat, driver_lon);
      markermoto = new google.maps.Marker({
        map: map,
        position: latLng,
        icon: driver_icon
      });
    } else {
      var latLng = new google.maps.LatLng(driver_lat, driver_lon);
      markermoto.setPosition(driverPosn);
    }
  } else {
    var pickup_lat = json.origin.lat;
    var pickup_lon = json.origin.lon;
    var pickup_icon = new google.maps.MarkerImage(
      "/static/img/pin_delivery_origin.png",
      null, /* size is determined at runtime */
      null, /* origin is 0,0 */
      null, /* anchor is bottom center of the scaled image */
      new google.maps.Size(80, 68));

    var dropoff_lat = json.dropoff.lat;
    var dropoff_lon = json.dropoff.lon;
    var dropoff_icon = new google.maps.MarkerImage(
      "/static/img/pin_delivery_destination.png",
      null, /* size is determined at runtime */
      null, /* origin is 0,0 */
      null, /* anchor is bottom center of the scaled image */
      new google.maps.Size(80, 68));

    // Adding a new marker for the object
    var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(pickup_lat, pickup_lon),
      map: map,
      icon: pickup_icon
    });
    var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(dropoff_lat, dropoff_lon),
      map: map,
      icon: dropoff_icon
    });
  }
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(marker1.getPosition());
  bounds.extend(marker2.getPosition());
  map.fitBounds(bounds);

};

var errorHandler = function() {

};
$(document).ready(function() {
  setInterval('successHandler(jsonData)', 5000);
});
// mexico city (19.432608,-99.133208)
var jsonData = {
  driver: {
    lat: 19.435,
    lon: -99.13
  },
  dropoff: {
    lat: 19.44,
    lon: -99.13
  },
  origin: {
    lat: 19.435,
    lon: -99.13
  },
  driver_name: "Fred"
};
＆＃13; 
html,
body,
#map-container {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题