WordPress中ACF字段地图半径筛选故障求助：showCloseLocations()异常

看起来你的showCloseLocations()函数卡在了地理编码后的标记更新环节，我帮你梳理几个最可能的问题点，附带修正思路和示例代码：

一、先排查Geocoder核心逻辑的漏洞 #

很多时候问题出在geocoder.geocode的回调处理上，比如忽略了状态判断、坐标提取错误，或者没有处理定位失败的情况：

• 必须添加状态校验：Geocoder可能返回ZERO_RESULTS、OVER_QUERY_LIMIT等错误状态，如果不处理，后续代码根本不会执行
• 确保坐标正确提取：如果是通过浏览器定位获取坐标，别混淆geocoder和navigator.geolocation的用法（前者是地址转坐标，后者是直接获取当前位置）

举个修正后的Geocoder回调示例：

geocoder.geocode({ address: userInputAddress }, (results, status) => {
    // 先校验状态，避免无效回调
    if (status !== google.maps.GeocoderStatus.OK) {
        console.error('地址解析失败:', status);
        alert('无法解析当前位置，请检查输入或定位权限');
        return;
    }

    // 正确提取当前位置坐标
    const userLocation = results[0].geometry.location;
    const userLat = userLocation.lat();
    const userLng = userLocation.lng();

    // 后续的距离计算、标记筛选逻辑放在这里
});

二、检查距离计算与标记筛选逻辑 #

如果Geocoder没问题，那大概率是距离计算或标记过滤出错了：

1. 单位统一：确保半径单位（比如公里/英里）和距离计算的单位一致（Haversine公式默认用公里，地球半径取6371；英里的话取3956）
2. 坐标类型转换：ACF返回的位置字段可能是字符串，必须转成浮点数再计算
3. 标记数组管理：清除旧标记时要彻底，新标记要正确存入全局数组

这里给你一个完整的showCloseLocations()修正版本，包含距离计算和标记更新逻辑：

// 全局存储标记，方便后续清除
window.markers = [];

function showCloseLocations() {
    // 1. 获取并校验半径参数
    const radiusInput = document.getElementById('radius-select').value;
    const radius = parseFloat(radiusInput);
    if (isNaN(radius) || radius <= 0) {
        alert('请输入有效的半径值');
        return;
    }

    // 2. 清除所有旧标记
    if (window.markers.length > 0) {
        window.markers.forEach(marker => marker.setMap(null));
        window.markers = [];
    }

    // 3. 获取当前位置（这里用浏览器定位，如果你用地址解析就换成geocoder）
    navigator.geolocation.getCurrentPosition(
        (position) => {
            const userLat = position.coords.latitude;
            const userLng = position.coords.longitude;

            // 4. 遍历ACF获取的所有位置数据
            // 假设ACF位置数据存在window.acfMapLocations数组中，每个元素包含lat、lng、title字段
            window.acfMapLocations.forEach(location => {
                const locLat = parseFloat(location.lat);
                const locLng = parseFloat(location.lng);

                // 用Haversine公式计算两点距离（公里）
                const distance = calculateDistance(userLat, userLng, locLat, locLng);

                // 5. 筛选半径内的位置并添加标记
                if (distance <= radius) {
                    const newMarker = new google.maps.Marker({
                        position: { lat: locLat, lng: locLng },
                        map: window.mapInstance, // 确保这里是你的地图实例
                        title: location.title
                    });
                    window.markers.push(newMarker);
                }
            });

            // 可选：自动调整地图视野到所有显示的标记
            if (window.markers.length > 0) {
                const bounds = new google.maps.LatLngBounds();
                window.markers.forEach(marker => bounds.extend(marker.getPosition()));
                window.mapInstance.fitBounds(bounds);
            } else {
                alert('该半径范围内没有找到匹配的位置');
            }
        },
        (error) => {
            console.error('定位失败:', error);
            alert('无法获取当前位置，请检查定位权限设置');
        }
    );
}

// Haversine公式：计算两点间的球面距离（公里）
function calculateDistance(lat1, lon1, lat2, lon2) {
    const earthRadius = 6371; // 地球半径（公里）
    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLon = (lon2 - lon1) * Math.PI / 180;
    const a = 
        Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
        Math.sin(dLon/2) * Math.sin(dLon/2); 
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    return earthRadius * c;
}

三、最后检查几个容易忽略的细节 #

• 确保你的地图实例（比如window.mapInstance）是全局可访问的，创建标记时不要写错引用
• 确认ACF的位置数据已经正确加载到前端（可以用console.log(window.acfMapLocations)检查）
• 如果用的是Google Maps API，确保API密钥已经启用了Geocoding和Maps JavaScript API权限

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