如何在WordPress的Google Maps脚本中输出并使用JavaScript变量

解决方案 #

首先明确document.write不适用该场景的核心原因：

• document.write仅能在HTML文档解析阶段输出内容，若外部脚本加载时文档已完成解析，调用该方法会直接清空现有页面内容，且该方法无法直接将变量值注入到当前正在声明的对象属性中，完全不适用于这类变量拼接需求。

前置操作（如果还未将目录URI变量暴露到前端全局） #

WordPress 推荐使用官方提供的wp_localize_script方法安全传递后端变量到外部JS脚本，在主题functions.php中添加如下代码：

// 注册并加载你的Google Maps外部脚本，注意句柄要和你现有注册的脚本句柄保持一致
wp_enqueue_script( 'custom-google-maps', get_template_directory_uri() . '/js/map-script.js', [], '1.0.0', true );
// 向前端JS传递变量
wp_localize_script( 'custom-google-maps', 'siteConfig', [
    // 如使用子主题，替换为 get_stylesheet_directory_uri()
    'themeDirUri' => get_template_directory_uri()
] );

执行后前端会生成全局可访问的siteConfig对象，siteConfig.themeDirUri就是你需要的目录URI。

修改Google Maps代码 #

直接用字符串拼接语法把变量拼接到图标路径中即可，修改后的代码如下：

new google.maps.Marker({
    position: o,
    map: t,
    icon: siteConfig.themeDirUri + '/images/icons/map_pin.png'
});

如果你已经提前定义好了全局可用的目录URI变量，直接替换siteConfig.themeDirUri为你自己的变量名即可，注意拼接时路径前后的斜杠不要重复或者遗漏。

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