使用 javascript 动态移动 Google Map 标记

Question

我有一个显示用户当前位置的 div。 我需要的是，当用户移动时，标记应该使用通过 ajax 和我的数据库获取的用户当前位置动态移动。 map 通过鼠标 onclick 事件启动，因为有多个用户。 我的整个代码块如下所示： 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 function 被触发时，标记消失了。

Answer 1

您的 moveMarker() 方法工作正常。 您的标记不会消失。 它只是移出视图。

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

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

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

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

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

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