javascript - 如何在 map 中不闪烁地平滑移动标记

Question

每次我向我们的服务器请求获取我的设备的新位置并更新我的标记在 map 上的位置时，我的标记都有问题，当我的车辆设备移动时，标记将跳到新位置及其闪烁。 我怎样才能避免这种情况不闪烁，或者我的标记可以平滑移动。

提前谢谢你。

var map;
var marker;
var markerarray =[];

setInterval(function(){

    $.ajax({
        type: "post",
        url: "vehiclecordinates.php",
        success: function(data){

            coordinates = data.latlng;
            vehiclename = data.vehiclename;

            for (var i = 0; i < coordinates.length; i++) {

                newcoordinate = new google.maps.LatLng(coordinates[i].split(",")[0],coordinates[i].split(",")[1]);
                marker =  new MarkerWithLabel({
                     map:map,
                     labelClass: "mylabels",
                     labelStyle: {opacity: 1.0},
                     labelContent: '<div>'+ vehiclename[i]+'</div>',
                     icon:{
                         //some options here
                     },
                });

                marker.setPosition(newcoordinate);
                markerarray.push(marker);
            }
        }
    });

    setTimeout(function () {
        removeMarkers();
        delete marker;
    }, 1000);
},5000);

function removeMarkers() {
    for(var i = 0; i < markerarray.length; i++) {
        markerarray[i].setMap(null);
    }
}

Answer 1

如果您不希望它们闪烁，请不要将它们从 map 中“移除”，更新它们的位置。

var map;
var marker;
var markerarray =[];

setInterval(function(){
  $.ajax({
    type: "post",
    url: "vehiclecordinates.php",
    success: function(data){
      coordinates = data.latlng;
      vehiclename = data.vehiclename;
      for (var i = 0; i < coordinates.length; i++) {
        newcoordinate = new google.maps.LatLng(coordinates[i].split(",")[0],coordinates[i].split(",")[1]);
        if (markerarray[vehiclename[i]] && markerarray[vehiclename[i]].setPosition){
          markerarray[vehiclename[i]].setPosition(newcoordinate);
        else {
          marker =  new MarkerWithLabel({
            map:map,
            labelClass: "mylabels",
            labelStyle: {opacity: 1.0},
            labelContent: '<div>'+ vehiclename[i]+'</div>',
            icon:{
              //some options here
            }
          });
          marker.setPosition(newcoordinate);
          markerarray[vehiclename[i]] = marker;
        }
      }
    }
  });
},5000);

参见 example基于 this similar question 中的示例