Question

当车辆在路上移动时，我试图在地图上移动标记（不会消失并再次显示）。

我有两个latLng值，我想在两者之间移动标记，直到车辆发送下一个点。然后再重复一遍。

我尝试了什么：[这不是一种非常有效的方式，我知道]

我的想法是使用以下几点中的技术来实现上述内容：

1）在两者之间画一条线。

2）获取折线的1/10分数上的每个点的latLng。

3）在地图上标记10个点以及折线。

这是我的代码：

var isOpen = false;
var deviceID;
var accountID;
var displayNameOfVehicle;
var maps = {};
var lt_markers = {};
var lt_polyLine = {};
function drawMap(jsonData, mapObj, device, deleteMarker) {
    var oldposition = null;
    var oldimage = null;
    var arrayOflatLng = [];

    var lat = jsonData[0].latitude;
    var lng = jsonData[0].longitude;
    //alert(jsonData[0].imagePath);

    var myLatLng = new google.maps.LatLng(lat, lng);

    if (deleteMarker == true) {
        if (lt_markers["marker" + device] != null) {
            oldimage = lt_markers["marker" + device].getIcon().url;
            oldposition = lt_markers["marker" + device].getPosition();
            lt_markers["marker" + device].setMap(null);
            lt_markers["marker" + device] = null;
        }
        else {
            console.log('marker is null');
            oldimage = new google.maps.MarkerImage(jsonData[0].imagePath,
                                                     null,
                                                     null,
                                                      new google.maps.Point(5, 17), //(15,27),
                                                     new google.maps.Size(30, 30));
            oldposition = myLatLng;
        }
    }


    var image = new google.maps.MarkerImage(jsonData[0].imagePath,
                                                     null,
                                                     null,
                                                      new google.maps.Point(5, 17), //(15,27),
                                                     new google.maps.Size(30, 30));
    lt_markers["marker" + device] = new google.maps.Marker({
        position: myLatLng,
        icon: image,
        title: jsonData[0].address
    });
    if (oldposition == myLatLng) {
        alert('it is same');
        lt_markers["marker" + device].setMap(mapObj);
        mapObj.panTo(myLatLng);
    }
    else {
        alert('it is not same');
        var markMarker = null;
        var i = 10;
        for (i = 10; i <= 100; i + 10) {
            //-------
            //  setTimeout(function() {
            if (markMarker != null) {
                markMarker.setMap(null);
                markMarker = null;
            }
            alert('inside the loop');
            var intermediatelatlng = mercatorInterpolate(mapObj, oldposition, myLatLng, i / 100);
            alert('Intermediate Latlng is :' + intermediatelatlng);
            arrayOflatLng.push(intermediatelatlng);

            var flightPath = new google.maps.Polyline({
                path: arrayOflatLng,
                strokeColor: "#FFFFFF",
                strokeOpacity: 1.0,
                strokeWeight: 1
            });
            flightPath.setMap(mapObj);
            if (i != 100) {
                markMarker = new google.maps.Marker({
                    position: intermediatelatlng,
                    icon: image,
                    title: jsonData[0].address,
                    map: mapObj
                });

            }
            else {
                markMarker = new google.maps.Marker({
                    position: intermediatelatlng,
                    icon: oldimage,
                    title: jsonData[0].address,
                    map: mapObj
                });                
            }
            mapObj.panTo(intermediatelatlng);
            //--------
            //   }, 1000);
        }
    }

}
function mercatorInterpolate(map, latLngFrom, latLngTo, fraction) {
    // Get projected points
    var projection = map.getProjection();
    var pointFrom = projection.fromLatLngToPoint(latLngFrom);
    var pointTo = projection.fromLatLngToPoint(latLngTo);
    // Adjust for lines that cross the 180 meridian
    if (Math.abs(pointTo.x - pointFrom.x) > 128) {
        if (pointTo.x > pointFrom.x)
            pointTo.x -= 256;
        else
            pointTo.x += 256;
    }
    // Calculate point between
    var x = pointFrom.x + (pointTo.x - pointFrom.x) * fraction;
    var y = pointFrom.y + (pointTo.y - pointFrom.y) * fraction;
    var pointBetween = new google.maps.Point(x, y);
    // Project back to lat/lng
    var latLngBetween = projection.fromPointToLatLng(pointBetween);
    return latLngBetween;
}

面临的问题：

1）标记没有显示在地图上，因为绘图和删除标记的过程非常快，以至于标记在屏幕上不可见。我已经尝试过setTimeOut，它根本没用。

2）如果我让浏览器运行此代码的时间超过5分钟，浏览器就会崩溃。

注意：使用setInterval每隔10秒调用一次Above函数。

什么是更好的解决方案？请帮助..

Answer 1

要使标记移动相对平稳，您需要

更新多于折线的1/10部分（至少每隔几个像素）
更频繁地调用更新方法
请勿删除并重新添加标记

例如：

var counter = 0;
interval = window.setInterval(function() { 
  counter++;
  // just pretend you were doing a real calculation of
  // new position along the complex path
  var pos = new google.maps.LatLng(35, -110 + counter / 100);
  marker.setPosition(pos);
  if (counter >= 1000) {
    window.clearInterval(interval);   
  }
}, 10);

我在http://jsfiddle.net/bmSbU/2/做了一个简单的例子，它显示了一条沿直线路径移动的标记。如果这是您想要的，那么您上面的大部分代码都可以重复使用（或查看http://broady.github.io/maps-examples/points-along-line/along-directions.html）

Answer 2

您可以使用marker-animate-unobtrusive库制作标记平稳地从一个位置过渡到另一个位置（而不是重新出现）。

您可以像这样初始化您的标记：

var marker = new SlidingMarker({
   //your original marker options
});

每次新车辆的坐标到达时，只需调用marker.setPosition（）。

P.S。我是图书馆的作者。

Answer 3

为什么不保留现有的Marker / MarkerImage并调用setPosition（）来移动它，无论是在计时器上还是在位置发生变化时？

删除它＆amp;重新创建它是导致它闪烁/闪烁并最终崩溃的原因。如果你保持相同的实例但只是移动它，你应该做得更好。

请参阅：Marker.setPosition（）

https://developers.google.com/maps/documentation/javascript/reference#Marker

Answer 4

使用javascript在Google地图上制作动画移动标记，可以在 Youtube.com

上看到它们

Answer 5

尝试使用此链接.. 首先在你拥有的2个地方添加两个标记。然后，您可以使用Link

中的代码在2个点之间创建动画

在地图上显示移动标记

5 个答案: