jQuery 在地图上显示移动标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16338774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show a moving marker on the map
提问by writeToBhuwan
I am trying to make a marker move(not disappear and appear again) on the map as a vehicle moves on the road.
当车辆在路上移动时，我试图在地图上移动标记（不会消失并再次出现）。
I have two values of latLng and I want to move the marker between the two till the next point is sent by the vehicle. And then repeat the process again.
我有两个 latLng 值，我想在两者之间移动标记，直到车辆发送下一个点。然后再次重复该过程。
What I tried:[This is not a very efficient way, I know]
我试过的：[这不是一种非常有效的方法，我知道]
My thought was to implement the above using the technique in points below:
我的想法是使用以下几点中的技术来实现上述内容：
1) Draw a line between the two.
1）在两者之间画一条线。
2) Get the latLng of each point on 1/10th fraction of the polyline.
2) 获取折线的 1/10 部分上每个点的 latLng。
3) Mark the 10 points on the map along with the polyline.
3) 在地图上与折线一起标记 10 个点。
Here is my Code:
这是我的代码：
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;
}
Problems Faced:
面临的问题：
1) The marker is not showing up on the map because the process of plotting and removal of marker is so fast that the marker is not visisble on screen. I've tried setTimeOut, and It does not help at all.
1) 标记未显示在地图上，因为绘制和移除标记的过程太快，以至于在屏幕上看不到标记。我试过 setTimeOut，它根本没有帮助。
2) if I alow the browser to run this code for more than 5 minutes, the browser crashes.
2) 如果我让浏览器运行这段代码超过 5 分钟，浏览器就会崩溃。
Note:The Above function is called every 10 seconds using setInterval.
注意：使用 setInterval 每 10 秒调用一次上述函数。
What Can be a better solution? Please Help..
什么是更好的解决方案？请帮忙..
回答by jlivni
For the marker to move relatively smoothly, you need to
要使标记相对平稳地移动，您需要
- Update more than every 1/10 fraction of the polyline (at least every few pixels)
- Call the update method more frequently
- Don't delete and re-add the marker
- 更新超过折线的每 1/10 部分（至少每几个像素）
- 更频繁地调用更新方法
- 不要删除并重新添加标记
For example, something like:
例如，类似于：
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);
I made a simple example at http://jsfiddle.net/bmSbU/2/which shows a marker moving along a straight path. If this is what you want, most of your code above regarding where along the line you are can be reused (or check out http://broady.github.io/maps-examples/points-along-line/along-directions.html)
我在http://jsfiddle.net/bmSbU/2/做了一个简单的例子，它显示了一个沿着直线路径移动的标记。如果这是您想要的，上面关于您所在位置的大部分代码都可以重用（或查看http://broady.github.io/maps-examples/points-along-line/along-directions。 html)
回答by viskin
You can use marker-animate-unobtrusivelibrary to make markers smoothly transition from one location to another (instead of reappearing).
您可以使用标记动画不显眼的库使标记从一个位置平滑过渡到另一个位置（而不是重新出现）。
You could initialize your marker like that:
你可以像这样初始化你的标记：
var marker = new SlidingMarker({
//your original marker options
});
Just call marker.setPosition() each time new vehicle's coordinate arrive.
每次新车辆的坐标到达时只需调用marker.setPosition()。
P.S. I'm the author of the library.
PS我是图书馆的作者。
回答by Thomas W
Why not keep the existing Marker/ MarkerImage and call setPosition() to move it, either on a timer or as the position changes?
为什么不保留现有的 Marker/MarkerImage 并调用 setPosition() 来移动它，无论是在计时器上还是在位置发生变化时？
Deleting it & recreating it is what causes it to flash/ flicker and eventually crash. If you keep the same instance but just move it, you should do much better.
删除它并重新创建它是导致它闪烁/闪烁并最终崩溃的原因。如果您保留相同的实例但只是移动它，您应该做得更好。
See: Marker.setPosition()
请参阅：Marker.setPosition()
https://developers.google.com/maps/documentation/javascript/reference#Marker
https://developers.google.com/maps/documentation/javascript/reference#Marker
