问题描述
我想在车辆在路上行驶时，在地图上进行标记移动（不会消失并再次出现）。
我有两个latLng值，我想在两者之间移动标记，直到车辆发送下一个点。
我试过的：[这不是一个非常有效的方法，我知道] b
$ b
我的想法是使用下面的技术实现上面的方法：
1）在两者之间画一条线。 p>
2）获取折线的1/10部分上每个点的latLng。
3）
以下是我的代码：
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 // -------
// setTimeout（function（）{
if（markMarker！= null）{
markMarker.setMap（null）;
markMarker = null;
}
alert（'loop'）;
var intermediatelatlng = mercatorInterpolate（mapObj，oldposition，myLatLng，i / 100）;
alert（'Intermediate Latlng is：'+ intermediatelatlng）;
arrayOflatLng.push（intermediateatelatlng）;
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）;
}
}
}
函数mercatorInterpolate（map，latLngFrom，latLngTo，fraction）{
//获取投影点
var projection = map.getProjection（）;
var pointFrom = projection.fromLatLngToPoint（latLngFrom）;
var pointTo = projection.fromLatLngToPoint（latLngTo）;
//调整穿过180子午线的线
if（Math.abs（pointTo.x - pointFrom.x）> 128）{
if（pointTo.x> pointFrom。 x）
pointTo.x - = 256;
else
pointTo.x + = 256;
}
//计算
之间的点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）;
//投影回lat / lng
var latLngBetween = projection.fromPointToLatLng（pointBetween）;
return latLngBetween;
}
面对的问题：
1）标记不会显示在地图上，因为绘制和删除标记的过程非常快，以至于标记在屏幕上不会显示。我试过setTimeOut，它根本不帮助。
2）如果我下载浏览器运行这段代码超过5分钟，浏览器崩溃。
注意：使用setInterval每10秒调用一次Above函数。
什么可以是更好的解决方案？请帮助..
对于标记移动相对平稳，您需要
- 更新多于折线的1/10分数（至少每几个像素）
- 更频繁地调用更新方法
- 不要删除并重新添加标记
例如：
var counter = 0;
interval = window.setInterval（function（）{
counter ++;
//假设你正在做一个真正的计算
//沿着复杂路径的新位置
var pos = new google.maps.LatLng（35，-110 + counter / 100）;
marker.setPosition（pos）;
if（counter> = 1000）{
window .clearInterval（interval）;
}
}，10）;
我在，其中显示标记沿着直线路径移动。如果这是你想要的，你的大多数代码上面的线沿着你是可以重用（或检查）
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.
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.
2) Get the latLng of each point on 1/10th fraction of the polyline.
3) Mark the 10 points on the map along with the polyline.
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.
2) if I alow the browser to run this code for more than 5 minutes, the browser crashes.
Note: The Above function is called every 10 seconds using setInterval.
What Can be a better solution? Please Help..
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
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 )
这篇关于在地图上显示移动标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！