时间戳

首页 > 解决方案 > 将php添加到js文件

javascript - 将php添加到js文件

问题描述

我正在制作一张包含各州的美国地图，以通过更改州的颜色来显示哪些州具有可用属性。
我正在使用 Leaflet 作为地图，并使用交互式 Choropleth 地图 ( https://leafletjs.com/examples/choropleth/ ) 作为构建此地图的基础。

我已添加"availability":"2"到us-states.js文件中，这是显示属性数量的地方。我想在.js文件中插入一个 php 查询以提取该状态的属性数量。这是us-states.js文件中的示例，以便您可以查看布局：

{"type":"Feature","id":"02","properties":{"name":"North Carolina","availability":"2"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-131.602021,55.117982],

我正在使用它来改变颜色：

    // get color depending on population density value
    function getColor(d) {
        return d > 1 ? '#e1cb7f' :

                          '#173e34';
    }

    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '',
            fillOpacity: 1.9,
            fillColor: getColor(feature.properties.availability)
        };
}

这是我的 php 查询：

<?php $count = array('post_type' => 'property', 'meta_key' => 'state', 'meta_value' => 'NC'); $myquery = new WP_Query($count);  ?>

我试图将它添加到 js 文件中，但它不起作用：

"availability":"<?php echo json_encode($myquery->found_posts) ?>"

如果我手动将属性数量添加到 us-states.js 文件中，地图上的颜色会发生变化，因此颜色变化部分正在工作，我只是无法让 php 在 .js 文件中工作。

这是我的网页： https ://www.thekeithcorp.com/interactive-map/

任何帮助，将不胜感激！

标签： javascriptphpleaflet

解决方案

在 WordPress 上，可以将变量传递给 JS，例如。与主题的functions.php：

function localize() {

    $items = WP_Query ...

    wp_register_script( 'custom', get_template_directory_uri() . '/js/scripts.js', array('jquery'), false, true );

     $script_vars = ["features" => []];
     for($i=0; $i < $items.size(); $i++) {

        array_push($script_vars['features'], (object) array(
             "id" => 2,
             "type" => "Feature",
             "properties" => (object) array(
                 "name" => "North Carolina",
                 "availability"=> 2
             ),
             "geometry" => (object) array(
                 "type" => "MultiPolygon",
                 "coordinates"=> [ ... ]
             )
        ));

    }

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'custom' );
    wp_localize_script('custom', 'script_vars', $script_vars);
}

if( !is_admin()) {
     add_action("wp_enqueue_scripts", "localize", 10);
}

虽然您可以将文件名后缀从.js更改为.php ...但是，当将地图与 WordPress 帖子集成时，最好进行本地化或使用 WP AJAX 异步加载数据 - 甚至缓存 HTML 输出，这可能不会有太大变化，除非添加了一些东西。

推荐阅读