如何将自定义 Wordpress 字段传递到 mapbox-gl js 以在地图上创建标记？答案

【问题标题】：How to pass custom Wordpress fields into mapbox-gl js to create markers on map?如何将自定义 Wordpress 字段传递到 mapbox-gl js 以在地图上创建标记？
【发布时间】：2021-03-07 09:49:02
【问题描述】：

我正在尝试使用 Mapbox 和 Wordpress 创建一个绘制不同点的地图。在 Wordpress 中，我创建了一个自定义帖子类型，其坐标存储在自定义元字段中。这些字段都已设置，但我无法将它们传递到我的 php 模板中的 javascript。

我尝试使用循环，但不能使用它，因为坐标需要存储在 javascript 中。似乎将自定义元字段存储在 geoJSON 中是唯一的解决方案。

这是 Mapbox 代码的样子，坐标和标题应该来自帖子和自定义字段：

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/coptmarketing/cjvi7hc4602dk1cpgqul6mz0b',
    center: [-76.615573, 39.285685],
    zoom: 16 // starting zoom
});

var geojson = {
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "properties": {
                "title": "Shake Shack"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-76.609844, 39.286894]
            }
        },
        {
            "type": "Feature",
            "properties": {
                "title": "Starbucks"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-76.619071, 39.286649]
            }
        }
    ]
};

我的 PHP 看起来像这样来获取自定义字段并将其转换为 JSON：

<?php $args = array( 
    'post_type' => 'places', 
    'post_status' => 'publish', 
    'nopaging' => true 
);
$query = new WP_Query( $args ); // $query is the WP_Query Object
$posts = $query->get_posts();   // $posts contains the post objects

$output = array();
foreach( $posts as $post ) {    // Pluck the id and title attributes
    $output[] = array(
        'id' => $post->ID,
        'title' => $post->post_title,
        'address' => get_post_meta($post->ID,'ci_cpt_adresse', true),
        'longitude' => get_post_meta($post->ID, 'ci_cpt_adressex', true),
        'altitude' => get_post_meta($post->ID, 'ci_cpt_adressey', true) 
    );
    }
$data = json_encode(['placelist' => $output]);
?>

然后我尝试通过此脚本处理数据。但是，它不返回任何内容：

<script>
var placeJson = data;

var stores = {
          "type:" "FeatureCollection",
          "features:" [],
        };

        for (i = 0; i < placeJson.placelist.length; i++) {

          geojson.features.push({
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [placeJson.placelist.[i].altitude, placeJson.placeList[i].longitude]
            },
            "properties": {
              "title": placeJson.placelist.[i].title
            }
          },);
        }
</script>    


<script>        
    stores.features.forEach(function(store, i){
      store.properties.id = i;
    });
</script>

我已经在这里找到了一个可能的解决方案，但不明白如何将其放入 geoJSON：How to pass custom fields into mapbox-gl js to create points on map?

【问题讨论】：

标签： javascript php json wordpress mapbox

【解决方案1】：

您可以通过 wp_localize_script 执行此操作（请注意，下面的代码是一个示例，需要根据您的情况进行更改）

wp_enqueue_script( 'my_mapbox', get_template_directory_uri() . '/js/mabox.js' );
 
$dataToBePassed = array(
    'home'            => get_stylesheet_directory_uri(),
    'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);
wp_localize_script( 'my_mapbox', 'php_vars', $datatoBePassed );

然后在您的脚本中调用本地化对象 https://code.tutsplus.com/tutorials/how-to-pass-php-data-and-strings-to-javascript-in-wordpress--wp-34699

【讨论】：

【解决方案2】：

基本上，这里有三种解决方案。当然，哪一个与您相关在很大程度上取决于您的用例！

在用于将脚本排入队列并使用来自查询的数据本地化 wp_localize_script 中的变量的函数中运行您的自定义发布查询（Jasper B 他的上述解决方案:)）
将 php 内联到脚本中。 PHP 代码与内联脚本在同一页面上（hacky 但快速测试）。像这样的东西（更正关闭的php）：

var data = // TODO 请更正这个！我不能在这里写。只要这个是编码的，它应该为您提供一组数据，只需 console.log 即可查看如果它是正确的。
您可以使用 Ajax 或 Wordpress REST 创建端点，并在您的 JS 文件中查询数据并显示它。 Here is some more info on how to set up an Ajax Get request

【讨论】：