使用 javascript 动态移动 Google 地图标记

Question

我有一个 div 可以显示用户的当前位置。我需要的是，当用户移动时，标记应该使用通过 ajax 和我的数据库获取的用户当前位置动态移动。由于有多个用户，地图是通过鼠标点击事件启动的。我的整个代码块如下所示： HTML 部分：

<div id="map" class="mapBlock" style="width: 100%; height: 400px;"></div>
<button class="btn btn-info btn-sm mr-2 trackUser" data-toggle="modal" data-target="#trackUser"  data-did="<?php echo trim($user['did']);?>" onclick="getDid(this.getAttribute('data-did'));">Track User</button>

Javascript 部分：

    var position = [10.1563183,76.3882613];
    var did = 1;
    var cord = [10.1563183,76.3882613];

    function getDid(x){
        did = x;
        initialize();
        //Load google map
        google.maps.event.addDomListener(window, 'load', initialize);
    }

    function initialize() { 
        var latlng = new google.maps.LatLng(position[0], position[1]);
        var myOptions = {
            zoom: 18,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);

        marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Latitude:"+position[0]+" | Longitude:"+position[1]
        });
        //auto refresh - update marker to current - position center
        var refreshId = setInterval("getLatLong(did)", 10000);
    }
    //get new lat/long
    function getLatLong(id) {
        var data = new FormData();
        data.append('did', id);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'users/get_user_location', true);
        xhr.onload = function () {
            if(xhr.status !== 200){
                return;
            }
            cord = this.responseText;
        };

        xhr.send(data);

        transition(cord);
    }

    var numDeltas = 100;
    var delay = 10; //milliseconds
    var i = 0;
    var deltaLat;
    var deltaLng;

    function transition(result){
        i = 0;
        deltaLat = (result[0] - position[0])/numDeltas;
        deltaLng = (result[1] - position[1])/numDeltas;
        moveMarker();
    }

    function moveMarker(){
        position[0] += deltaLat;
        position[1] += deltaLng;
        var latlng = new google.maps.LatLng(position[0], position[1]);
        marker.setTitle("Latitude:"+position[0]+" | Longitude:"+position[1]);
        marker.setPosition(latlng);

        if(i!=numDeltas){
            i++;
            setTimeout(moveMarker, delay);
        }
    }

一切正常，但是当触发 setinterval 函数时，标记消失了。

Answer 1

您的 moveMarker() 方法运行良好。您的标记不会消失。它只是移出了视图。

您可以通过两种方式解决该问题：

降低缩放级别。当前设置为 18。您可以将其设置为 12 或其他值。

    var myOptions = {
        zoom: 12, //Decrease your Zoom Level.
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

另一种方法是，您可以在移动标记时移动地图的中心。您应该在使用标记的 setPosition 之前执行此操作，如下所示

        map.setCenter(latlng); //Here center the map.
        marker.setPosition(latlng);

我不确定您为什么使用 setTimeout 从 moveMarker 内部调用 moveMarker。这将递归调用您的方法，但不会对地图坐标产生任何影响。您已经每 10 秒调用一次 getLatLong，这应该足够了。

使用 javascript 动态移动 Google 地图标记

Move Google Map marker dynamically using javascript

javascript

google-maps

google-maps-api-3