Wie übergebe ich benutzerdefinierte Wordpress-Felder an mapbox-gl js, um Markierungen auf der Karte zu erstellen?

Nov 24 2020

Ich versuche, mit Mapbox und Wordpress eine Karte zu erstellen, in der verschiedene Punkte dargestellt werden. In Wordpress habe ich einen benutzerdefinierten Beitragstyp erstellt, dessen Koordinaten in benutzerdefinierten Metafeldern gespeichert sind. Die Felder sind alle eingerichtet, aber ich habe Probleme, sie in das Javascript in meiner PHP-Vorlage zu übergeben.

Ich habe versucht, eine Schleife zu verwenden, kann sie jedoch nicht verwenden, da die Koordinaten im Javascript gespeichert werden müssen. Das Speichern der benutzerdefinierten Metafelder in einem GeoJSON scheint die einzige Lösung zu sein.

So sollte der Mapbox-Code aussehen, die Koordinaten und der Titel sollten jedoch aus den Posts und benutzerdefinierten Feldern stammen:

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

Mein PHP sieht so aus, um die benutzerdefinierten Felder abzurufen und in JSON umzuwandeln:

<?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]);
?>

Ich habe dann versucht, die Daten über dieses Skript zu verarbeiten. Es wird jedoch nichts zurückgegeben:

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

Ich habe hier bereits eine mögliche Lösung gefunden, verstehe aber nicht, wie ich sie in geoJSON einbinden kann: Wie übergebe ich benutzerdefinierte Felder an mapbox-gl js, um Punkte auf der Karte zu erstellen?

Antworten

JasperB Nov 24 2020 at 22:52

Sie können dies über wp_localize_script tun (bitte beachten Sie, dass der folgende Code ein Beispiel ist und geändert werden muss, damit er in Ihrem Fall funktioniert).

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 );

und dann in Ihrem Skript das lokalisierte Objekt aufrufen https://code.tutsplus.com/tutorials/how-to-pass-php-data-and-strings-to-javascript-in-wordpress--wp-34699

HendrikVlaanderen Nov 25 2020 at 06:14

Grundsätzlich gibt es hier drei Lösungen. Welches für Sie relevant ist, hängt natürlich von Ihrem Anwendungsfall ab!

  1. Führen Sie Ihre benutzerdefinierte Post-Abfrage in der Funktion aus, mit der Sie das Skript in die Warteschlange stellen, und lokalisieren Sie eine Variable in wp_localize_script mit den Daten aus der Abfrage (Jasper B seine Lösung oben :))

  2. Inline die PHP mit dem Skript. PHP-Code befindet sich auf derselben Seite wie das Inline-Skript (hackig, aber schnell zum Testen). So etwas wie das (korrigiere das schließende PHP):

    var data = <? php $ data? "> // TODO Korrigieren Sie diese pls! Ich kann es hier nicht schreiben. Solange dies codiert ist, sollte es Ihnen ein Array von Daten liefern, nur console.log es, um zu sehen, ob es ist richtig.

  3. Sie können einen Endpunkt mit Ajax oder Wordpress REST erstellen und in Ihrer JS-Datei die Daten abfragen und anzeigen. Hier finden Sie weitere Informationen zum Einrichten einer Ajax Get-Anfrage