我的博客上有大量的城市页面，我需要在每个城市页面上放置特定于城市的地图，并添加额外的控制来构建路线。

这是我想要创建的布局：

我正在为地图使用Mapbox GL JS库。地图和方向控件的JS文件和样式托管在Mapbox CDN上：

<script src=\'https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js\'></script>
<script src=\'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js\'></script>
<link rel=\'stylesheet\' href=\'https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css\' />        
<link rel=\'stylesheet\' href=\'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css\' type=\'text/css\' />

要在页面上放置地图，请使用以下代码：

<div id=\'map\'></div>

<script>
mapboxgl.accessToken = \'YourAccessToken\';
var map = new mapboxgl.Map({
    container: \'map\',
    style: \'mapbox://styles/mapbox/streets-v9\',
    center: [-71.4512, 43.6568],
    zoom: 13
});

map.addControl(new MapboxDirections({
    accessToken: mapboxgl.accessToken
}), \'top-left\');
</script>

因为我需要覆盖许多城市，所以我为城市页面创建了一个新模板。因此，我只是在页眉和页面内容/侧栏之间添加上面提到的代码（请参见布局模型）。

问题是，我不知道如何将每个特定城市/地图的纬度/经度值传递给Mapbox脚本中的这部分代码：

    center: [-71.4512, 43.6568]

理想情况下，如果我可以通过自定义字段在编辑页面中输入它们：

这两个值将以某种方式填充到脚本中。也许可以在页面模板中为这两个参数添加某种占位符：

center: [%latitude%, %longitude%]

以便从相应的字段填充它们，并加载特定的城市地图。如果有人能为我指出正确的方向，我将不胜感激。

非常感谢。

namespace StackExchange\\WordPress;

add_action( \'wp_footer\', __NAMESPACE__ . \'\\wp_footer\' );
function wp_footer() {
    echo \'<script>var map = new mapboxgl.Map(\'.
    wp_json_encode( [ \'container\' => \'map\', \'center\' => \\get_post_meta( \\get_the_ID() \'gpsCoordinates\', true ) ])
        .\');</script>\';
}

namespace StackExchange\\WordPress;

add_action( \'wp_enqueue_scripts\', __NAMESPACE__ . \'wp_enqueue_scripts\' );
function wp_enqueue_scripts() {
    wp_add_inline_script( \'mapbox\', 
        \'var map = new mapboxgl.Map(\'.
            wp_json_encode( [ \'container\' => \'map\', \'center\' => \\get_post_meta( \\get_the_ID() \'gpsCoordinates\', true ) ])
        .\');\'
    );
}