infowindow не обновляется с помощью маркера google maps

Question

Я разрабатываю веб-страницу для просмотра местоположений транспортных средств с использованием данных gps. Я сделал заднюю часть, отлично работаю с помощью г-на Аруны, гения в переполнении стека. Теперь мне нужна помощь по обновлению моей карты 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

Ваш 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.