Yeni konuma göre sürüklemeden haritayı otomatik olarak uzaklaştırın ve haritayı hareket ettirin

Question

Web sitemde bir google map yerleştirdim. Veritabanından servlet aracılığıyla aldığım konumlarda işaretçiler oluşturuyorum. Veritabanındaki koordinatların düzenli aralıklarla değişip değişmediğini kontrol et ve haritadaki işareti değiştir.

Yeni konum değiştiğinde, sürükleme yapmadan ve konuma göre dinamik olarak gösterilmeden önceki merkezden uzak olsalar bile yeni koordinatları nasıl gösteririm. setInterval() kullanarak updateMarker()'u arıyorum. Daha sonra setCenter() ve setZoom() ancak tanımsız bir harita alıyorum. Bunu yapmadan önce sadece birkaç satır haritaya erişebiliyorum. Bu küresel bir değişken.

 function updateMarker(markerArray) 
    { 
     bounds = new google.maps.LatLngBounds(); 
     for(i=0;i<markerArray.length;i++) 
      { 
       markerArray[i].setMap(null); 
      } 

     markerArray.length = 0; 

     latArray.forEach(function(lat, i) { 
      var infoWindow = new google.maps.InfoWindow({ 
       content: '<div id="content>' + '<p style="color:#000000">DeviceID:<p>' + '<p>' + deviceId[i] + '</p>' + '</div>' 
      }); 

      var marker = new google.maps.Marker({ 
       map: map, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       //position: new google.maps.LatLng(latArray[i], lngArray[i]), 
       icon: "phone6.png" 
      }); 
      markerArray.push(marker); 
      markerArray[i].setPosition(new google.maps.LatLng(latArray[i],lngArray[i])); //marker undefined here 
      markerArray[i].addListener("click", function() { 
       infoWindow.open(map, marker); 

      }); 
      //console.log(markerArray) 
     }); 
     map.setCenter(markerArray[0]); //map is undefined here and next line. 
     map.fitBounds(bounds); 
    } 


    setInterval(function(){ 
     getLocationFromServlet(xhr); 
     //console.log("called db"); 
     updateMarker(markerArray); 

    },400); 

Bütün kodu:

 var locationArray, latArray = [], 
      lngArray = [], 
      contentStringArray = [], 
      contentString = [], 
      deviceId = [], 
      data, deviceIdLoopCount = 2; 
    var test = 1; 
    var markerArray = []; 
    var map; 
    var xhr = new XMLHttpRequest();; 
    var latArrayCount =1, markerCount=1,markerCount2=1; 
    var bounds; 

    function initMap() { 
     getLocationFromServlet(xhr); 
     setTimeout(function(){ 
      createMap(); 
     },1300); 

    } 
    function createMap(){ 

     var mapDiv = document.getElementById('map'); 
     map = new google.maps.Map(mapDiv); 
     map.setCenter(new google.maps.LatLng(latArray[0], lngArray[0])); 
     map.setZoom(17); 
     createMarker(); 
     setTimeout(function(){ 
      // console.log(markerArray); 
     },1600) 

     //   console.log(deviceId); 
     //   console.log(latArray); 
    } 
    function createMarker(){ 
     console.log(test++); 
     latArray.forEach(function(lat, i) { 
      var infoWindow = new google.maps.InfoWindow({ 
       content: '<div id="content>' + '<p style="color:#000000">DeviceID:<p>' + '<p>' + deviceId[i] + '</p>' + '</div>' 
      }); 
      // console.log(test++); 
      var marker = new google.maps.Marker({ 
       map: map, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       //position: new google.maps.LatLng(latArray[i], lngArray[i]), 
       icon: "phone6.png" 
      }); 
      markerArray.push(marker); 
      markerArray[i].setPosition(new google.maps.LatLng(latArray[i],lngArray[i])); //marker undefined here 
      markerArray[i].addListener("click", function() { 
       infoWindow.open(map, marker); 
      }); 

     }); 
     console.log(latArray); 
    } 


    function getLocationFromServlet(xhr) 
    { 
     xhr = new XMLHttpRequest(); 
     xhr.open('POST', 'GetLocationFromDB', true); 
     xhr.send(); 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState == 4) { 
       data = JSON.parse(xhr.responseText); 
       //console.log(data); 
       if(latArrayCount!=1) 
       { 
        latArray.length=0; 
        lngArray.length=0; 
        deviceId.length=0; 
       } 
       else 
       { 
        latArrayCount++; 
       } 
       for (i = 0; i < data.length; i++) { 
        if (!((i + 1) % 3 == 0)) { 
         //console.log(data); 
         latArray.push(data[i]); 
         lngArray.push(data[i + 1]); 
         deviceId.push(data[i+2]); 
         i = i + 2; 
         //deviceIdLoopCount += 3; 
        } 
       } 
      } 
      //createMap(); 
     } 

    } 
    function updateMarker(markerArray) 
    { 
     bounds = new google.maps.LatLngBounds(); 
     for(i=0;i<markerArray.length;i++) 
      { 
       markerArray[i].setMap(null); 
      } 

     markerArray.length = 0; 

     latArray.forEach(function(lat, i) { 
      var infoWindow = new google.maps.InfoWindow({ 
       content: '<div id="content>' + '<p style="color:#000000">DeviceID:<p>' + '<p>' + deviceId[i] + '</p>' + '</div>' 
      }); 

      var marker = new google.maps.Marker({ 
       map: map, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       //position: new google.maps.LatLng(latArray[i], lngArray[i]), 
       icon: "phone6.png", 
       label: deviceId[i] 
      }); 
      markerArray.push(marker); 
      markerArray[i].setPosition(new google.maps.LatLng(latArray[i],lngArray[i])); //marker undefined here 
      markerArray[i].addListener("click", function() { 
       infoWindow.open(map, marker); 


      }); 
      //console.log(markerArray) 
     }); 
     map.setCenter(parseDouble(markerArray[0])); 
     map.fitBounds(bounds); 
    } 


    setInterval(function(){ 
     getLocationFromServlet(xhr); 
     //console.log("called db"); 
     updateMarker(markerArray,map); 

    },400); 

Answer 1

Sen küresel değişkenler olarak map ve markerArray var. Değişkeni bir işlev olarak bir parametreye geçirdiğinizde, değişken için yeni kapsam oluşturan bir kapatma oluşturursunuz. Değişken küresel olduğundan

, sonra aralık

setInterval(function(){ 
    //you pass a function inside another function as a parameter 
    getLocationFromServlet(function(data){ 
    //data is your data from the server 
    updateMarker(); 
    }); 
},400); 

gibi görünecektir sen bunu geçmesi gerekmez Ve seni getLocationFromServlet işlevi

function getLocationFromServlet(callback) 
    { 
     xhr = new XMLHttpRequest(); 
     xhr.open('POST', 'GetLocationFromDB', true); 
     xhr.send(); 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState == 4) { 
       data = JSON.parse(xhr.responseText); 
       //console.log(data); 
       if(latArrayCount!=1) 
       { 
        latArray.length=0; 
        lngArray.length=0; 
        deviceId.length=0; 
       } 
       else 
       { 
        latArrayCount++; 
       } 
       for (i = 0; i < data.length; i++) { 
        if (!((i + 1) % 3 == 0)) { 
         //console.log(data); 
         latArray.push(data[i]); 
         lngArray.push(data[i + 1]); 
         deviceId.push(data[i+2]); 
         i = i + 2; 
         //deviceIdLoopCount += 3; 
        } 
       } 
      } 
      callback(data); //here you know that you received data from server; 
     } 

    } 

için geri arama geçmek tavsiye https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures