infowindow未使用标记Google Maps更新

Question

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

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

在您的for循环完成很久之后，您的click事件监听器被异步调用。 因此， 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闭包 。