如何将WordPress自定义字段值填充到Mapbox GL JS地图代码中？

我来帮你搞定这个需求——把WordPress自定义字段的值传递到Mapbox GL JS代码里，同时实现带路线规划的地图。下面分两种常用方案，一种是快速嵌入，另一种是符合WordPress规范的最佳实践：

方案一：直接在模板中嵌入JS（快速实现） #

这种方式适合快速测试或者不需要分离JS文件的场景，直接在你的城市专属模板里写代码即可：

步骤1：添加地图容器和资源引入 #

在模板的合适位置（比如内容下方）插入地图容器，同时引入Mapbox核心库和路线规划插件的资源：

<!-- 地图容器 -->
<div id="city-map" style="width: 100%; height: 450px; margin: 20px 0;"></div>

<!-- 引入Mapbox GL JS核心 -->
<script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />

<!-- 引入路线规划控件（Mapbox Directions） -->
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css' type='text/css' />

步骤2：注入自定义字段值到JS #

紧接着上面的代码，编写地图初始化脚本，用PHP直接输出自定义字段的值到JS变量中：

<script>
// 替换成你的Mapbox API密钥
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

// 从WordPress自定义字段获取城市数据
// 注意：这里的字段名要和你创建的自定义字段键完全一致
const cityLat = <?php echo get_post_meta(get_the_ID(), 'city_latitude', true); ?>;
const cityLng = <?php echo get_post_meta(get_the_ID(), 'city_longitude', true); ?>;
const cityName = '<?php echo esc_js(get_post_meta(get_the_ID(), 'city_name', true)); ?>';

// 初始化地图
const map = new mapboxgl.Map({
  container: 'city-map', // 对应上面的容器ID
  style: 'mapbox://styles/mapbox/streets-v12', // 可替换成其他Mapbox样式
  center: [cityLng, cityLat], // Mapbox坐标顺序是[经度, 纬度]，别搞反！
  zoom: 11 // 根据城市大小调整缩放级别
});

// 添加路线规划控件
map.addControl(
  new MapboxDirections({
    accessToken: mapboxgl.accessToken,
    origin: [cityLng, cityLat], // 默认起点设为当前城市
    placeholderOrigin: `从${cityName}出发`,
    placeholderDestination: '输入目的地'
  }),
  'top-left' // 控件位置，可选top-right、bottom-left等
);
</script>

关键注意点：

• 用esc_js()处理字符串类型的自定义字段（比如城市名），防止XSS攻击和转义错误。
• 确认自定义字段的键名和你在WordPress后台创建的完全一致（比如city_latitude vs city_lat）。
• Mapbox的坐标顺序是经度在前，纬度在后，别和常规的经纬度顺序搞混！

方案二：用wp_localize_script传递数据（WordPress最佳实践） #

如果你的主题遵循规范，把JS代码分离到单独文件，推荐用这种方式，更安全且便于维护：

步骤1：在functions.php中注册脚本并传递数据 #

打开主题的functions.php，添加以下代码：

function enqueue_city_map_scripts() {
  // 只在城市模板页面加载脚本
  if (is_page_template('city-template.php')) { // 替换成你的城市模板文件名
    // 引入Mapbox核心库和路线规划插件
    wp_enqueue_script('mapbox-gl', 'https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js', array(), '2.15.0', true);
    wp_enqueue_style('mapbox-gl-css', 'https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css', array(), '2.15.0');
    
    wp_enqueue_script('mapbox-directions', 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js', array('mapbox-gl'), '4.1.0', true);
    wp_enqueue_style('mapbox-directions-css', 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css', array('mapbox-gl-css'), '4.1.0');
    
    // 注册自定义地图脚本
    wp_enqueue_script('custom-city-map', get_template_directory_uri() . '/js/city-map.js', array('mapbox-gl', 'mapbox-directions'), '1.0', true);
    
    // 收集当前页面的自定义字段数据
    $city_map_data = array(
      'accessToken' => 'YOUR_MAPBOX_ACCESS_TOKEN',
      'latitude' => get_post_meta(get_the_ID(), 'city_latitude', true),
      'longitude' => get_post_meta(get_the_ID(), 'city_longitude', true),
      'cityName' => get_post_meta(get_the_ID(), 'city_name', true)
    );
    
    // 将PHP数据传递到JS，生成全局变量CityMapData
    wp_localize_script('custom-city-map', 'CityMapData', $city_map_data);
  }
}
add_action('wp_enqueue_scripts', 'enqueue_city_map_scripts');

步骤2：创建单独的JS文件 #

在主题目录下新建js/city-map.js，编写地图初始化代码：

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 检查全局变量是否存在，避免报错
  if (typeof CityMapData === 'undefined') return;

  mapboxgl.accessToken = CityMapData.accessToken;

  // 初始化地图
  const map = new mapboxgl.Map({
    container: 'city-map',
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [CityMapData.longitude, CityMapData.latitude],
    zoom: 11
  });

  // 添加路线规划控件
  map.addControl(
    new MapboxDirections({
      accessToken: mapboxgl.accessToken,
      origin: [CityMapData.longitude, CityMapData.latitude],
      placeholderOrigin: `从${CityMapData.cityName}出发`,
      placeholderDestination: '输入目的地'
    }),
    'top-left'
  );
});

步骤3：在城市模板中添加地图容器 #

在你的城市专属模板（比如city-template.php）中插入地图容器：

<div id="city-map" style="width: 100%; height: 450px; margin: 20px 0;"></div>

最后检查事项 #

1. 确保每个城市页面都正确填写了对应的自定义字段值（纬度、经度、城市名）。
2. 替换代码中的YOUR_MAPBOX_ACCESS_TOKEN为你自己的Mapbox API密钥。
3. 测试页面加载是否正常，地图是否正确定位到对应城市，路线规划控件是否可用。

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