infowindow不更新与标记谷歌地图 [英] infowindow is not updating with marker google maps
本文介绍了infowindow不更新与标记谷歌地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个使用GPS数据查看车辆位置的网页。
我在Aruna先生的帮助下使堆栈溢出的后端工作正常。现在我需要帮助更新我的谷歌地图infowindow。标记正在更新其位置没有问题。而点击它不更新是当前速度和另一个信息据此。
下面是
var map = new google.maps.Map（document.getElementById（map_canvas ），myOptions）;
getMarkers（）;
函数getMarkers（）{
var infowindow = null; （b）b
$ b $ .get（'/ markers'，{}，function（res，resp）{
console.dir（res）;
for = 0，len = res.length; i< len; i ++）{
var content = res [i] .name +S1：+ res [i] .speed * 1.6 +'< br />'+D：+ res [i] .lastupdate
infowindow = new google.maps.InfoWindow（{
content：A
}）;
//我们是否已经有这个标记了？
if（markerStore.hasOwnProperty（res [i] .id））{
console.log（'just move it ...'）;
markerStore [res [i] .id] .setPosition（new google.maps.LatLng（res [i] .position.lat，res [i ] .position.long））;
//markerStore[res[i].id].setMap(map）;
//不确定下面的块和它的不是更新
google.maps.event.addListener（markerStore [res [i] .id]，'click'，（fu nction（marker，content，infowindow）{
return function（）{
infowindow.setContent（content）;
infowindow.open（map，markerStore [res [i] .id]）;
};
}）（markerStore [res [i] .id]，content，infowindow））;
} else {
var marker = new google.maps.Marker（{
position：new google.maps.LatLng （res [i] .position.lat，res [i] .position.long），
title：res [i] .name，
map：map
}）;
google.maps.event.addListener（marker，'click'，（function（marker，content，infowindow））{
return function（）{
infowindow.setContent（content ）;
infowindow.open（map，marker）;
};
}）（marker，content，infowindow））;
// var marker = new google.maps.Marker（{
// position：new google.maps.LatLng（res [i] .position.lat，res [i] .position.long），
// title：res [i] .name，
// map：map
//}）;
$ b //google.maps.event.addListener（marker，'click'，（function（marker，content，infowindow）{
// return function（）{
// infowindow.setContent（content）;
// infowindow.open（map，marker）;
//};
//}）（marker，content，infowindow） ）;
markerStore [res [i] .id] = marker;
console.log（marker.getTitle（））;
}
}
window.setTimeout（getMarkers，INTERVAL）;
}，json）;
}
请帮助我...
之后循环已完成。因此， i 的价值不符合您的预期。 这很容易解决（假设没有其他的
将中的所有代码放在循环体中并使其成为函数。我会调用函数 addMarker（item），但当然你可以使用任何你想要的名字。
在该函数中的任何位置都有 res [i] ，将其更改为 item 。然后缩短循环的，使它只包含一行： addMarker（res [i]）; 现在您的代码如下所示：
var map = new google .maps.Map（document.getElementById（map_canvas），myOptions）;
getMarkers（）;
函数getMarkers（）{
var infowindow = null; （b）b
$ b $ .get（'/ markers'，{}，function（res，resp）{
console.dir（res）;
for = 0，len = res.length; i< len; i ++）{
addMarker（res [i]）;
}
function addMarker（item）{
var content = item.name +S1：+ item.speed * 1.6 +'< br />'+D：+ item.lastupdate
infowindow = new google。 maps.InfoWindow（{
content：A
}）;
//我们是否已经有这个标记？
if（markerStore.hasOwnProperty（item。 id））{
console.log（'just move it ...'）;
markerStore [item.id] .setPosition（new google.maps.LatLng（item.position。 lat，item.position.long））;
//markerStore[item.id].setMap(map）;
//不确定下面的块和它没有更新
google.maps.event.ad dListener（markerStore [item.id]，'click'，（function（marker，content，infowindow）{
return function（）{
infowindow.setContent（content）;
infowindow.open（map，markerStore [item.id]）;
};
}）（markerStore [item.id]，content，infowindow））;
} else {
var marker = new google.maps.Marker（{
position：new google.maps.LatLng （item.position.lat，item.position.long），
title：item.name，
map：map
}）;
google.maps.event.addListener（marker，'click'，（function（marker，content，infowindow））{
return function（）{
infowindow.setContent（content ）;
infowindow.open（map，marker）;
};
}）（marker，content，infowindow））;
// var marker = new google.maps.Marker（{
// position：new google.maps.LatLng（item.position.lat，item.position。长），
// title：item.name，
// map：map
//}）;
$ b //google.maps.event.addListener（marker，'click'，（function（marker，content，infowindow）{
// return function（）{
// infowindow.setContent（content）;
// infowindow.open（map，marker）;
//};
//}）（marker，content，infowindow） ）;
markerStore [item.id] = marker;
console.log（marker.getTitle（））;
}
}
window.setTimeout（getMarkers，INTERVAL）;
}，json）;
}
我没有检查代码中是否有其他错误，但是这样会解决您所问的具体问题。
要详细了解此信息，请阅读 JavaScript闭包。
I am developing a web page for viewing vehicle locations using gps data. I have make the back end working fine with the help of Mr. Aruna a genius in stack Overflow. Now I need a help for updating my google map infowindow. marker is updating its location no issue with that. while clicking it is not updating is current speed and another info according to that. Below is the code in
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
getMarkers();
function getMarkers() {
var infowindow = null;
$.get('/markers', {}, function (res, resp) {
console.dir(res);
for (var i = 0, len = res.length; i < len; i++) {
var content = res[i].name + " S1: " + res[i].speed * 1.6 + '<br />' + "D: " + res[i].lastupdate
infowindow = new google.maps.InfoWindow({
content: "A"
});
//Do we have this marker already?
if (markerStore.hasOwnProperty(res[i].id)) {
console.log('just move it...');
markerStore[res[i].id].setPosition(new google.maps.LatLng(res[i].position.lat, res[i].position.long));
//markerStore[res[i].id].setMap(map);
// Not sure below block and its not updating
google.maps.event.addListener(markerStore[res[i].id], 'click', (function (marker, content, infowindow) {
return function () {
infowindow.setContent(content);
infowindow.open(map, markerStore[res[i].id]);
};
})(markerStore[res[i].id], content, infowindow));
} else {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(res[i].position.lat, res[i].position.long),
title: res[i].name,
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
return function () {
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, content, infowindow));
//var marker = new google.maps.Marker({
// position: new google.maps.LatLng(res[i].position.lat, res[i].position.long),
// title: res[i].name,
// map: map
//});
//google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
// return function () {
// infowindow.setContent(content);
// infowindow.open(map, marker);
// };
//})(marker, content, infowindow));
markerStore[res[i].id] = marker;
console.log(marker.getTitle());
}
}
window.setTimeout(getMarkers, INTERVAL);
}, "json");
}
Please help me ...
解决方案
Your click event listener is called asynchronously, long after your for loop has completed. So the value of i is not what you expect.
This is easy to fix (assuming there are not other problems as well).
Take all of the code inside the for loop body and make it a function. I'll call the function addMarker( item ), but of course you can use any name you want.
Everywhere you have res[i] in that function, change it to item. Then shorten the for loop so it contains only a single line: addMarker( res[i] );.
So now your code looks like this:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
getMarkers();
function getMarkers() {
var infowindow = null;
$.get('/markers', {}, function (res, resp) {
console.dir(res);
for (var i = 0, len = res.length; i < len; i++) {
addMarker( res[i] );
}
function addMarker( item ) {
var content = item.name + " S1: " + item.speed * 1.6 + '<br />' + "D: " + item.lastupdate
infowindow = new google.maps.InfoWindow({
content: "A"
});
//Do we have this marker already?
if (markerStore.hasOwnProperty(item.id)) {
console.log('just move it...');
markerStore[item.id].setPosition(new google.maps.LatLng(item.position.lat, item.position.long));
//markerStore[item.id].setMap(map);
// Not sure below block and its not updating
google.maps.event.addListener(markerStore[item.id], 'click', (function (marker, content, infowindow) {
return function () {
infowindow.setContent(content);
infowindow.open(map, markerStore[item.id]);
};
})(markerStore[item.id], content, infowindow));
} else {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.position.lat, item.position.long),
title: item.name,
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
return function () {
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, content, infowindow));
//var marker = new google.maps.Marker({
// position: new google.maps.LatLng(item.position.lat, item.position.long),
// title: item.name,
// map: map
//});
//google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
// return function () {
// infowindow.setContent(content);
// infowindow.open(map, marker);
// };
//})(marker, content, infowindow));
markerStore[item.id] = marker;
console.log(marker.getTitle());
}
}
window.setTimeout(getMarkers, INTERVAL);
}, "json");
}
I didn't check for any other errors in your code, but this will fix the specific problem you are asking about.
To learn more about this, read up on JavaScript closures.
这篇关于infowindow不更新与标记谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
