Jak przekazać niestandardowe pola Wordpress do mapbox-gl js, aby utworzyć znaczniki na mapie?

Nov 24 2020

Próbuję utworzyć mapę przedstawiającą różne punkty za pomocą Mapbox i Wordpress. W Wordpress stworzyłem niestandardowy typ postu ze współrzędnymi przechowywanymi w niestandardowych polach meta. Wszystkie pola są skonfigurowane, ale mam problem z przekazaniem ich do javascript w moim szablonie php.

Próbowałem użyć pętli, ale nie mogę jej użyć, ponieważ współrzędne muszą być przechowywane w javascript. Wygląda na to, że przechowywanie niestandardowych pól meta w geoJSON jest jedynym rozwiązaniem.

Oto jak powinien wyglądać kod Mapbox, jednak współrzędne i tytuł powinny pochodzić z postów i pól niestandardowych:

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

Moje PHP wygląda tak, aby pobrać niestandardowe pola i przekształcić je w 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]);
?>

Następnie spróbowałem przetworzyć dane za pomocą tego skryptu. Jednak nic nie zwraca:

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

Znalazłem już tutaj możliwe rozwiązanie, ale nie rozumiem, jak wprowadzić je do geoJSON: Jak przekazać niestandardowe pola do mapbox-gl js, aby utworzyć punkty na mapie?

Odpowiedzi

JasperB Nov 24 2020 at 22:52

możesz to zrobić przez wp_localize_script (pamiętaj, że poniższy kod jest przykładem i musi zostać zmieniony, aby działał w Twoim przypadku)

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

a następnie w swoim skrypcie wywołanie zlokalizowanego obiektu 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

Zasadniczo istnieją tutaj trzy rozwiązania. To, który z nich jest dla Ciebie odpowiedni, zależy w dużej mierze od Twojego przypadku użycia!

  1. Uruchom niestandardowe zapytanie pocztowe w funkcji, której używasz do umieszczenia skryptu w kolejce i zlokalizuj zmienną w wp_localize_script z danymi z zapytania (Jasper B jego rozwiązanie powyżej :))

  2. Umieść plik php w skrypcie. Kod PHP znajduje się na tej samej stronie co wbudowany skrypt (hackery, ale szybki do testowania). Coś takiego (popraw zamykające php):

    var data = <? php $ data? "> // TODO Popraw to pls! Nie mogę tego tutaj napisać. Dopóki jest to zakodowane, powinno dostarczyć ci tablicę danych, po prostu console.log to sprawdź, czy to jest poprawne.

  3. Możesz utworzyć punkt końcowy za pomocą Ajax lub Wordpress REST, a następnie w swoim pliku JS zapytać o dane i wyświetlić je. Oto więcej informacji o tym, jak skonfigurować żądanie Ajax Get