WordPress短码内JavaScript失效：谷歌地图插件开发求助

你的问题核心是直接在短码输出的JS脚本，在WordPress环境下因为脚本加载时机、事件覆盖问题导致失效。下面是修正后的正确写法：

核心问题分析 #

1. window.onload 事件容易被WordPress主题或其他插件的脚本覆盖，导致你的loadScript函数无法触发。
2. 直接在短码内嵌入脚本不符合WordPress的脚本管理规范，容易引发加载顺序冲突。
3. 原代码未给地图容器设置宽高，即使JS正常执行，地图也可能无法显示。

修正方案：分离HTML与JS，使用WordPress脚本机制 #

1. 修改短码函数（插件主文件中） #

只输出地图容器，通过WordPress的脚本API加载JS并传递数据：

add_shortcode('bikes_on_map', 'bikes_on_map_func');

function bikes_on_map_func( $atts ) {
    // 注册并加载自定义地图脚本
    wp_enqueue_script(
        'bikes-map-script',
        plugin_dir_url( __FILE__ ) . 'js/bikes-map.js', // 脚本文件路径，根据你的插件结构调整
        array(), // 无依赖可留空，如需jQuery可填array('jquery')
        '1.0',
        true // 设为true在页脚加载，避免阻塞DOM渲染
    );

    // 将PHP中的地图数据传递到JS（安全且灵活）
    wp_localize_script(
        'bikes-map-script',
        'BikeMapData', // 全局JS变量名
        array(
            'mapId' => 'map',
            'locations' => array(
                array("DESCRIPTION", 45.923407054259506, 6.869511535283576, 3),
                array("DESCRIPTION", 41.914873, 12.506486, 2),
                array("DESCRIPTION", 41.918574, 12.507201, 1)
            ),
            'center' => array(45.923407054259506, 6.869511535283576),
            'zoom' => 15
        )
    );

    // 输出带样式的地图容器（必须设置宽高）
    return '<div id="map" style="width: 100%; height: 400px;"></div>';
}

2. 创建独立的JS文件（如js/bikes-map.js） #

将地图初始化逻辑放在单独文件中，使用DOM就绪事件触发：

// 动态加载Google Maps API
function loadGoogleMapsScript(callback) {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = `https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=${callback}`;
    document.body.appendChild(script);
}

// 初始化地图
function initializeMap() {
    // 通过全局变量获取传递的数据
    const mapElement = document.getElementById(BikeMapData.mapId);
    if (!mapElement) return;

    const map = new google.maps.Map(mapElement, {
        zoom: BikeMapData.zoom,
        center: new google.maps.LatLng(BikeMapData.center[0], BikeMapData.center[1]),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    const infowindow = new google.maps.InfoWindow();

    // 遍历创建标记
    BikeMapData.locations.forEach((location) => {
        const marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[1], location[2]),
            animation: google.maps.Animation.BOUNCE,
            map: map
        });

        // 绑定标记点击事件
        google.maps.event.addListener(marker, 'click', () => {
            infowindow.setContent(location[0]);
            infowindow.open(map, marker);
        });
    });
}

// 在DOM完全加载后执行脚本
document.addEventListener('DOMContentLoaded', () => {
    loadGoogleMapsScript('initializeMap');
});

关键优化点 #

• 使用wp_enqueue_script管理脚本，确保加载顺序正确，避免冲突。
• 通过wp_localize_script安全传递PHP数据到JS，避免硬编码。
• 用DOMContentLoaded替代window.onload，更可靠且触发时机更早。
• 给地图容器明确设置宽高，解决地图不显示的潜在问题。

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