如何用PHP+JS实现谷歌地图标记定时自动刷新，解决传参未定义报错

您好，我正在尝试为页面上展示的Google Map地图实现标记自动刷新功能，已经搜索了多个小时，找不到适配我当前场景的合适解决方案。
请问有没有人可以提供可行的实现思路？
我已经尝试过多种方法，都没能得到想要的效果。

原有代码如下：

var map;
var geocoder;
function loadMap() {
    var pune = {lat: 18.5204, lng: 73.8567};
    map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: pune
    });

    var marker = new google.maps.Marker({
    position: pune,
    map: map
    });

    var cdata = JSON.parse(document.getElementById('data').innerHTML);
    geocoder = new google.maps.Geocoder();  
    codeAddress(cdata);

    var allData = JSON.parse(document.getElementById('allData').innerHTML);
    showAllColleges(allData)
}

function showAllColleges(allData) {
    var infoWind = new google.maps.InfoWindow;
    Array.prototype.forEach.call(allData, function(data){
        var content = document.createElement('div');
        var strong = document.createElement('strong');
    
        strong.textContent = data.name;
        content.appendChild(strong);

        var img = document.createElement('img');
        img.src = 'img/Leopard.jpg';
        img.style.width = '100px';
        content.appendChild(img);

        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map
    });

        marker.addListener('mouseover', function(){
        infoWind.setContent(content);
        infoWind.open(map, marker);
    })
    
        marker.addListener('mouseup', function(){
        infoWind.close(map, marker);
    })
    })
  }

 function codeAddress(cdata) {
 Array.prototype.forEach.call(cdata, function(data){
    var address = data.name + ' ' + data.address;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == 'OK') {
        map.setCenter(results[0].geometry.location);
        var points = {};
        points.id = data.id;
        points.lat = map.getCenter().lat();
        points.lng = map.getCenter().lng();
        updateCollegeWithLatLng(points);
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
});
}

我在这里设置了一个定时器：

setInterval(function updateCollegeWithLatLng(points) {
    $.ajax({
        url:"action.php",
        method:"post",
        data: points,
        success: function(res) {
        console.log(res)
    }
})

}, 3000)

控制台输出的报错信息如下：

Notice: Undefined index: id in /storage/ssd3/702/16987702/public_html/google-map-php-mysql-master/action.php on line 4

Notice: Undefined index: lat in /storage/ssd3/702/16987702/public_html/google-map-php-mysql-master/action.php on line 5

Notice: Undefined index: lng in /storage/ssd3/702/16987702/public_html/google-map-php-mysql-master/action.php on line 6
Updated...

• 定时器内重写了updateCollegeWithLatLng函数，且执行时没有传入points参数，导致发送给后端的请求参数为空，PHP接收不到对应字段就会抛出未定义索引的警告
• 没有实现标记刷新的完整逻辑：当前定时器只负责更新后端坐标，没有拉取最新点位数据、清除旧标记、渲染新标记的步骤，无法实现页面标记自动刷新的效果
• 没有全局存储已创建的标记实例，刷新时会出现旧标记不消失、新标记重复叠加的问题

1. 新增全局变量存储标记实例 #

var map;
var geocoder;
var markers = []; // 存储所有已渲染的标记，用于刷新时清除旧标记

2. 拆分独立功能函数，避免重名 #

// 坐标更新到后端的专用函数
function updateCollegeWithLatLng(points) {
    $.ajax({
        url:"action.php",
        method:"post",
        data: points,
        success: function(res) {
            console.log(res)
        }
    })
}

// 标记刷新专用函数：清除旧标记+拉取最新数据+渲染新标记
function refreshMapMarkers() {
    // 先清空所有旧标记
    markers.forEach(function(marker) {
        marker.setMap(null);
    });
    markers = [];

    // 拉取最新的点位数据，推荐直接调用接口获取实时数据，避免DOM缓存旧数据
    $.ajax({
        url: "getCollegeList.php", // 新增后端接口，返回格式和原allData一致的最新学院坐标JSON数据
        method: "get",
        dataType: "json",
        success: function(allData) {
            var infoWind = new google.maps.InfoWindow();
            allData.forEach(function(data){
                var content = document.createElement('div');
                var strong = document.createElement('strong');
                strong.textContent = data.name;
                content.appendChild(strong);

                var img = document.createElement('img');
                img.src = 'img/Leopard.jpg';
                img.style.width = '100px';
                content.appendChild(img);

                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data.lat, data.lng),
                    map: map
                });
                markers.push(marker);

                marker.addListener('mouseover', function(){
                    infoWind.setContent(content);
                    infoWind.open(map, marker);
                });
                
                marker.addListener('mouseup', function(){
                    infoWind.close(map, marker);
                });
            })
        }
    })
}

3. 调整定时器逻辑，只调用刷新函数 #

// 每3秒刷新一次标记
setInterval(refreshMapMarkers, 3000);

4. 后端参数校验优化 #

给action.php增加参数存在性判断，避免参数为空时报错：

<?php
if(isset($_POST['id'], $_POST['lat'], $_POST['lng'])) {
    $id = $_POST['id'];
    $lat = $_POST['lat'];
    $lng = $_POST['lng'];
    // 此处写入你的数据库更新逻辑
    echo "Updated...";
} else {
    echo "Missing required parameters";
}
?>

内容的提问来源于stack exchange，提问作者light stratos