使用ajax制作动画标记

Question

im can't figure out how to solve this.

I'm getting data from json file with ajax, this json file contains 3 points to be markers called "pickup", "dropoff" and "motomarker", this file is getting new data every 5 seconds, and the only changes the location coordinates is "Motomaker".

When this location changes the "motomarker" is not getting new position, it's created a new one whit the new coordinates.

The json looks like this

{"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"}}

My code is this

<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);
    });

Answer 1

Create a global variable to hold a reference to your markermoto:

var markermoto;

If the marker doesn't exist or doesn't have a setPosition method, create it, if it does exist and has a setPosition method, move the existing one.

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);
}

proof of concept fiddle

code snippet:

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"
};

html,
body,
#map-container {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-container" style="border: 2px solid #3872ac;"></div>

</div>