正在更新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地图标记

回答

相关问题