중복없이 Google지도에서 여러 마커를 동적으로 이동

Question

jquery 모바일을 사용하여 phonegap 프로젝트를 진행 중입니다. Google지도 api에 익숙합니다. json에서 마커 배열을 가져 와서지도에 표시 할 수 있습니다. & SetInterval 함수를 사용하여 데이터베이스에서 위도와 경도를 업데이트했습니다. 문제는 마커가 setInterval 함수 때문에 계속 중복됩니다. 중복 마커를 제거하기 위해 stackoverflow에서 하나의 솔루션을 찾았으나 이제는 데이터베이스에 마커가 두 개 있지만 여기서 한 마커 만 보여줍니다. 복제하지 않고 두 마커를 업데이트하고 싶습니다. 내 코드는 지금까지 (한 마커 만 작업)

setInterval(function() { 
 
      $.ajax({ 
 
       url: "http://dbmysite.net/getlatlongdriver.php", 
 
       type: "post", 
 
       dataType: 'json', 
 
       success: function (data, status) { 
 
        $.mobile.loading('hide'); 
 
        $.each(data, function (i, item) { 
 
         $.each(data, function (i, item) { 
 
          /* add a marker for each location in response data */ 
 
          addMarker(item.latitude, item.longitude, item.username); 
 
          console.log(item.username, item.latitude, item.longitude); 
 
         }); 
 
        }); 
 

 

 
       }, 
 
       error: function() { 
 

 
        $.mobile.loading('hide'); 
 
        alert('unexpected error<br>try again later'); 
 

 
       } 
 
      }); 
 
     }, 1000); 
 

 
function addMarker(lat, lng, username) { 
 
      var labels = { 
 
       text: username, 
 
       color: 'black', 
 
       fontSize: '40' 
 
      }; 
 
      var icons = { 
 
       url: "../www/img/marker.png", // url 
 
       scaledSize: new google.maps.Size(50, 50), // scaled size 
 
       origin: new google.maps.Point(0, 0), // origin 
 
       anchor: new google.maps.Point(0, 0) // anchor 
 
      }; 
 

 
      var latlon = { 
 
       lat: parseFloat(lat), 
 
       lng: parseFloat(lng) 
 
      } 
 

 
      if (marker && marker.setMap) { 
 
       // if the marker already exists, remove it from the map 
 
       marker.setMap(null); 
 
      } 
 
      // create a new marker 
 

 
      marker = new google.maps.Marker({ 
 
       map: map, 
 
       position: { 
 
        lat: parseFloat(lat), 
 
        lng: parseFloat(lng) 
 
       }, 
 
       label: labels, 
 
       //    icon: icons, 
 
       title: name 
 
      }); 
 

 
      google.maps.event.addListener(marker, 'click', function (event) { 
 
       map.panTo(this.getPosition()); 
 
       map.setZoom(16); 
 

 
      }.bind(marker)); 
 
     }

Answer 1

  var map = null; 
 
      var gmarkers = []; 
 
      var intervalNumber = 0; 
 

 
      setInterval(function() { 
 
       $.ajax({ 
 
        url: "http://quickexample.com/FindMyRide/getlatlongdriver.php", 
 
        type: "post", 
 
        dataType: 'json', 
 
        success: function (response) { 
 

 
         $.mobile.loading('hide'); 
 

 
         $.each(response, function (i, item) { 
 
          $.each(response, function (i, item) { 
 
           /* add a marker for each location in response data */ 
 
           var lat = item.latitude; 
 
           var lng = item.longitude; 
 
           update_map(response, item.latitude, item.longitude); 
 

 
          }); 
 
         }); 
 

 

 

 
        }, 
 
        error: function() { 
 

 
         $.mobile.loading('hide'); 
 
         alert('unexpected error<br>try again later'); 
 

 
        } 
 
       }); 
 
      }, 3000); 
 

 
      update_map = function (data, lat, lng) { 
 

 
       var icon = { 
 
        url: "../www/img/marker.png", // url for custom marker 
 
        scaledSize: new google.maps.Size(50, 50), // scaled size 
 
        origin: new google.maps.Point(0, 0), // origin 
 
        anchor: new google.maps.Point(0, 0) // anchor 
 
       }; 
 

 

 

 
       var bounds = new google.maps.LatLngBounds(); 
 

 
       // delete all existing markers first 
 
       for (var i = 0; i < gmarkers.length; i++) { 
 
        gmarkers[i].setMap(null); 
 

 
       } 
 
       gmarkers = []; 
 
       // add new markers from the JSON data 
 
       for (var i = 0, length = data.length; i < length; i++) { 
 
        latLng = new google.maps.LatLng(data[i].latitude, data[i].longitude); 
 
        bounds.extend(latLng); 
 
        var marker = new google.maps.Marker({ 
 
         position: latLng, 
 
         map: map, 
 
         icon: icon, 
 
        }); 
 
        var infoWindow = new google.maps.InfoWindow(); 
 
        google.maps.event.addListener(marker, "click", function (e) { 
 
         infoWindow.setContent(data.username + "<br>" + marker.getPosition().toUrlValue(6)); 
 
         infoWindow.open(map, marker); 
 
        }); 
 
        (function (marker, data) { 
 
         google.maps.event.addListener(marker, "click", function (e) { 
 
          infoWindow.setContent(data.username + "<br>" + marker.getPosition().toUrlValue(6)); 
 
          infoWindow.open(map, marker); 
 
         }); 
 
        })(marker, data[i]); 
 
        gmarkers.push(marker); 
 
       } 
 
      }; 
 

 
      function initialize() { 
 
       // initialize the map on page load. 
 
       var mapOptions = { 
 
        center: new google.maps.LatLng(19.1254, 72.9992), 
 
        zoom: 12, 
 

 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
 
       }; 
 
       map = new google.maps.Map(document.getElementById("map-canvas"), 
 
        mapOptions); 
 
       // add the markers to the map if they have been loaded already. 
 
       if (gmarkers.length > 0) { 
 
        for (var i = 0; i < gmarkers.length; i++) { 
 
         gmarkers[i].setMap(map); 
 
        } 
 
       } 
 
      } 
 

 
      google.maps.event.addDomListener(window, 'load', initialize);