用Wordpress自定义字段的值填充Javascript代码？

Question

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

这就是我想要创建的布局：

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

<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%]

因此，它们将从相应的字段中填充，并加载特定的城市地图。如果有人能为我指明正确的方向，我会很感激的。

谢谢!

Answer 1

如果我是你的话，我会把GPS坐标存储在后置元中。如果您想要更改，可以在编辑页上显示一个元框。否则，添加一次后元，并忘记它。

然后，您可以使用wp_footer钩子打印javascript，并以post值作为坐标。

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>';
}

如果已经有一个包含mapboxgl代码的命名脚本排队，那么您可以只使用添加内联脚本。

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 ) ])
        .');'
    );
}

如果您还不知道如何添加元框的文档，请看一看。