如何顺利移动标记而不会在地图上闪烁 [英] How to move marker smoothly without blinking in map

问题描述

每当我收到我们的服务器请求以获取我的设备的新位置并更新标记在地图上的位置时，我的标记中存在问题，当我的车辆设备移动时，标记将跳转到新位置和它的闪烁。
如何避免这种情况不闪烁，或者我的标记可以顺利移动。

I have problem in my markers every time I get request to our server to get the newly location of my devices and updated the position of my markers on the map,when my vehicle devices move,the marker will jump to the newly location and its flickering. How can I avoid this not to flickering,or my Marker can move smoothly.

预先感谢您。

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

推荐答案

你不希望它们闪烁，不要从地图上移除它们，更新它们的位置。

If you don't want them to flicker, don't "remove" them from the map, update their position.

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

请参阅示例，基于这个类似的问题

这篇关于如何顺利移动标记而不会在地图上闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！