如何在地图上平滑移动标记而不闪烁

Question

我在获取设备最新位置并在地图上更新标记时遇到问题，当我的车辆设备移动时，标记会跳到新位置并闪烁。我该如何避免闪烁，或让标记平滑移动？谢谢您的帮助。

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

- jemz

---

如果您不想让它们闪烁，请不要从地图中“删除”它们，而是更新它们的位置。 - geocodezip

但如果我不删除标记，我的浏览器将会挂起。 - jemz

Answer 1

如果你不想让它们闪烁，就不要从地图上“移除”它们，而是更新它们的位置。

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

请查看示例，这个示例基于类似问题中的示例

- geocodezip

---

我明白了，好的，我会尝试这个解决方案并告诉你结果。我会回来的。谢谢你的帮助和快速回复。 - jemz

请注意，此代码未经测试（您没有提供足够的信息来允许最小、完整、可测试和可读示例），可能需要调试。 - geocodezip

好的，我会尽力尝试并尽可能调试。顺便问一下，如果我有发送坐标的设备，是否可以使我的标记器像这个例子http://econym.org.uk/gmap/example_cartrip.htm一样移动呢？ - jemz

你可能需要选择你想要的。那个例子展示了整个路径，并以小增量移动标记。我猜你有“真实”的数据，想要显示当前位置。如果你愿意，你可以编写代码以更快的速度将每个标记移动到其新位置的一部分距离；但如果你有很多标记，那将需要更多的处理能力。 - geocodezip