更新谷歌地图标记

Question

我正在尝试制作一个在用户位置更新时更新标记的 Google 地图。我已经完成了大部分工作，但我遇到了一个小问题。我想要一个显示起点的标记，我正在工作，但第二个点应该继续移动，并且它应该允许同时跟踪多个用户。

我可以让它为一位用户工作（从 Android 应用发送 GPS 坐标）。它将设置开始标记，并且随着它们的位置变化，标记将移动以反映这一点。当我开始跟踪第二个用户时，我的问题就出现了。第一个用户的当前位置标记成为第二个用户的起始位置。它从第一条路径“跳跃”到另一条路径（见图）。我知道这部分是由于在顶部声明了“marker1”变量，但我尝试了很多没有运气的事情。我需要能够为 n 个用户创建尽可能多的用户，因此我不能为每个用户声明一堆变量。

您可以在图片中看到正在发生的事情。这是新用户在应用程序中触发跟踪功能的时刻。在第二个用户激活跟踪功能之前，第一个用户的标记正在正常移动。

    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);
        });
    });
}

Answer 1

考虑到我并不真正了解 javascript，我在这里可能完全错了，但我假设作为参数发送给 setInterval 的匿名函数被多次调用 (?)。

如果是这种情况，我希望 marker1 被重用，因为它是在函数外部声明的，也就是说，它与这部分代码中每个函数调用使用的 marker1 相同

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

我猜您可以对 marker1 使用与对 loc 相同的方法，将其作为由用户 ID 索引的数组。 （也许称它为 currentLocationMarker 也是一个更好的名字）

另一种方法是让 marker1 仅存在于函数中，但这可能会导致用户之前的所有当前位置标记都可见。对此不确定，我不了解您正在构建的这个系统的全貌。

Answer 2

不完全清楚问题是什么，但您是否尝试过使用.panTo()？它平滑地滚动到新位置。在你的.setPosition()之后调用它。

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