正在更新Google地圖標記

我正在嘗試製作更新標記的Google地圖，因爲用戶的位置已更新。我完成了大部分工作，但我遇到了一個小問題。我想要一個顯示起點的標記，我已經開始工作了，但第二點應該繼續移動，並且它應該允許一次跟蹤多個用戶。正在更新Google地圖標記

我可以得到這個適用於一個用戶（從Android應用程序發送GPS座標）。它將設置開始標記，並且隨着它們的位置改變，標記將移動以反映該標記。當我開始跟蹤第二個用戶時，就會出現問題。第一個用戶的當前位置標記成爲第二個用戶的起始位置。它從第一條路徑跳到另一條路徑（見圖片）。我知道這部分是由於頂部的'marker1'變量的聲明，但我嘗試了許多事情，但沒有運氣。我需要爲n個用戶創建儘可能多的數據，所以我不能爲每個用戶聲明一堆變量。 enter image description here

您可以在圖片中看到正在發生的事情。這是新用戶在應用程序中觸發跟蹤功能的時刻。在第二個用戶激活跟蹤功能之前，第一個用戶的標記正常移動。

function initialize() { 
    var myLatlng = new google.maps.LatLng(39, -86); 
    var myOptions = { 
     zoom: 6, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }  
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var loc = {}; 
    var mark = {}; 
    var markers = {}; 
    var marker1; 

    $(function() { 
     $(document).ready(function(){ 
      setInterval(function(){ 
       $.ajax({          
        url: 'api.php',     //the script to call to get data   
        //data: "",      
        dataType: 'json',    //data format  
        success: function(data){   //on recieve of reply       


         var user_id = data[0]; 
         var lati = data[1];    //get id 
         var longi = data[2];   //get name 

         var myLatlngt = new google.maps.LatLng(lati, longi); 

         if (typeof loc[user_id] === 'undefined') { 
          loc[user_id] = []; 
          } 

         //if (typeof markers[user_id] === 'undefined') { 
          //markers[user_id] = []; 
          //} 

         if (typeof mark[user_id] === 'undefined') { 
          mark[user_id] = myLatlngt; 
          } 

         loc[user_id].push(myLatlngt); 
         //markers[user_id].push(myLatlngt); 

         var x; 
         for (x in loc) { 
          var polyline = new google.maps.Polyline({ 
           map: map, 
           path: loc[x], 
           strokeColor: "#FF0000", 
           strokeOpacity: 1.0, 
           strokeWeight: 2 
           }); 
          polyline.setMap(map); 

          ///location variables 
          var start_loc = loc[user_id]; 
          var start_marker = start_loc[0]; //start location of given user 
          var current_loc = start_loc[start_loc.length -1]; //last known location of given user 

          //set the start marker 
          var marker = new google.maps.Marker({ 
           position: start_marker, 
           title: user_id 
          }); 
          marker.setMap(map); 

          //update the current location marker 
          if (marker1 != null) { 
           marker1.setPosition(current_loc); 
          } 
          else { 
           marker1 = new google.maps.Marker({ 
            position: current_loc, 
            map: map 
           }); 

          }     
         } 
          //console.log('location :::', x); 
          console.log('Marker: ', mark); 
        } 
       }); 
      }, 1000); 
     }); 
    }); 
}

來源

2012-01-29 mkyong

你需要爲每個用戶使用折線 – machineaddict 2012-01-29 08:48:42

我有這個工作。我想這個圖像並沒有很好地說明。如果我要繼續從user2發送座標，那麼會有一條折線。 – mkyong 2012-01-29 09:06:10

它只是沒有順利滾動到新的位置？ – ThinkingStiff 2012-01-29 10:55:56

考慮，我真的不知道我的JavaScript可能會完全以錯在這裏，但我假設被作爲參數傳遞給setInterval的匿名函數被調用多次（？）。

如果是這樣的話，我希望，因爲它的功能，即外宣佈重新使用標誌1，它是在代碼

//update the current location marker 
if (marker1 != null) { 
    marker1.setPosition(current_loc); 
}

的這部分用於每個函數調用相同MARKER1

我想你可以對marker1使用相同的方法，就像對loc使用相同的方法，將它作爲用戶ID索引的數組。（也許稱它當前位置標記也是一個更好的名字）

另一種方法是將marker1只存在於函數內，但這可能會導致用戶的所有以前的當前位置標記可見。不確定，我沒有看到你正在構建的這個系統的全貌。

來源

2012-01-29 11:10:26 Johan

這個問題並不完全清楚，但是您是否嘗試過使用.panTo()？它順利滾動到新的位置。在你的.setPosition()之後打電話給它。

if (marker1 != null) { 
    marker1.setPosition(current_loc); 
    map.panTo(current_loc); 
}

來源

2012-01-29 18:14:01 ThinkingStiff

正在更新Google地圖標記

回答

相關問題