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。

infowindow没有使用标记谷歌地图进行更新

1 个答案: