Javascript 如何在谷歌地图中删除旧地图标记并更新新地图

我正在创建一个应用程序，它可以获取实时位置并渲染到GoogleMap。在特定的时间间隔之后，我必须移除旧的标记，并需要渲染udpated标记

下面是我的代码

function initMap(rtl_data) {
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();

        var latlng = new google.maps.LatLng(24.238162, 45.156379);
        var myOptions = {
            zoom: 7,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var marker = []
        var map = new google.maps.Map(document.getElementById("map"),myOptions);
        directionsDisplay.setMap(map);

        makeMarkers(rtl_data)

        function makeMarkers(rtl_data){
            // Drivers Location Markers
            deleteMarkers()
            features = []
            marker = []
            drivers_latlng = rtl_data.drivers_latest_location
            drivers_latlng.forEach(function(e){
                features.push({
                    position: new google.maps.LatLng(e.lat, e.lng),
                    type: e.order_id,
                    title: e.driver_id,
                    description: e.order_id ? "Ongoing order: "+e.order_id : "No order assigned."
                })
            })

            image = "/files/truck.png"
            infoWindow = new google.maps.InfoWindow();
            for (i = 0; i < features.length; i++) {
                marker = new google.maps.Marker({
                    position: features[i].position,
                    map: map,
                    title: features[i].title,
                    type: features[i].type,
                    icon: image,
                    description: features[i].description
                });
                //Attach click event to the marker.
                (function (marker) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
                        infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + marker.description + "</div>");
                        infoWindow.open(map, marker);
                    });
                })(marker);
            }

            // Sets the map on all markers in the array.
            function setMapOnAll(map) {
                for (var i = 0; i < marker.length; i++) {
                    marker[i].setMap(map);
                }
            }

            // Removes the markers from the map, but keeps them in the array.
            function clearMarkers() {
                setMapOnAll(null);
                console.log('clearMarkers')
            }

            // Shows any markers currently in the array.
            function showMarkers() {
                setMapOnAll(map);
            }

            // Deletes all markers in the array by removing references to them.
            function deleteMarkers() {
                console.log('deleteMarkers')
                clearMarkers();
                marker = [];
            }
        }

        // Fetch Realtime using time interval
        setInterval(function() {
            frappe.call({ // Simple AJAX Call which returns locations and location realated data.
                method: "get_drivers_locations",
                async: false,
                callback: function(r){
                    rtl_data = r.message
                }
            })
            makeMarkers(rtl_data)
        }, 5000);

函数初始化映射（rtl_数据）{
directionsService=new google.maps.directionsService（）；
directionsDisplay=new google.maps.DirectionsRenderer（）；
var latlng=新的google.maps.latlng（24.238162,45.156379）；
变量myOptions={
缩放：7，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
变量标记=[]
var map=new google.maps.map（document.getElementById（“map”），myOptions）；
方向显示.setMap（地图）；
生成标记（rtl_数据）
函数标记（rtl_数据）{
//司机位置标记
删除标记（）
功能=[]
标记=[]
驱动程序\u latlng=rtl\u数据。驱动程序\u最新位置
驱动程序\u latlng.forEach（功能（e）{
推送功能({
位置：新google.maps.LatLng（e.lat，e.lng），
类型：e.订单号，
标题：e.driver_id，
描述：e.order_id？“正在进行的订单：”+e.order_id:“未分配订单。”
})
})
image=“/files/truck.png”
infoWindow=new google.maps.infoWindow（）；
对于（i=0；i

我已经使用了谷歌地图文档中使用的方法。 使用ClearMarkers可以清除旧的标记。但在我的情况下，它不起作用。 当我运行上面的代码时，它会显示旧的和升级的标记

请参见下面的屏幕截图，该截图使用更新的位置重复标记。

---

将标记初始化为数组：

var marker = []

但稍后将指定一个标记实例：

marker = new google.maps.Marker({...})

我没有运行您的示例，但我希望，marker变量将包含最后创建的标记，而不是标记数组

尝试下一步：

将标记变量重命名为标记

实现addMarker函数。此函数应将新标记推送到标记数组

---

阅读以下内容后： 我找到了解决办法。 我创建了一个数组

gmarkers = []

把我所有的新标记都放进去了

gmarkers.push(marker)

为了删除标记，我使用了以下函数

function setMapOnAll(map) {
    for (var i = 0; i < gmarkers.length; i++) {
        gmarkers[i].setMap(map);
    }
}

函数setMapOnal（映射）{
对于（变量i=0；i

您的init函数的闭包括号是错误的。如果您查看原始文档，init函数在addmarker函数之前关闭。在您的示例中，它在setInterval之前关闭。因此您的setInterval可能甚至无法访问makeMarker函数，因为该函数位于另一个函数内。

否参考官方文档：（来自谷歌）在示例中，创建了一个新的marker实例，然后将其推送到数组markers:markers.push（marker）；请仔细查看addMarker函数。这没有提供答案，因此可能是一条注释。是的，下面的答案似乎是正确的。

function setMapOnAll(map) {
    for (var i = 0; i < gmarkers.length; i++) {
        gmarkers[i].setMap(map);
    }
}