信息窗口未使用标记谷歌地图更新

Question

我正在开发一个网页，用于使用 gps 数据查看车辆位置。 在堆栈溢出天才 Aruna 先生的帮助下，我让后端工作正常。现在我需要帮助来更新我的谷歌地图信息窗口。标记正在更新其位置，这没有问题。单击它时不会更新当前速度和其他信息。 以下是

中的代码

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

请帮帮我...

Answer 1

您的click 事件侦听器在您的for 循环完成很久之后被异步调用。所以i 的值不是你所期望的。

这很容易解决（假设也没有其他问题）。

获取for 循环体中的所有代码并使其成为函数。我将调用函数addMarker( item )，当然你可以使用任何你想要的名字。

在该函数中有res[i] 的任何地方，将其更改为item。然后缩短 for 循环，使其仅包含一行：addMarker( res[i] );。

所以现在您的代码如下所示：

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

我没有检查您代码中的任何其他错误，但这将解决您所询问的具体问题。

要了解更多信息，请阅读JavaScript closures。