Question

我正在一张带有各州的美国地图上工作，以通过更改州的颜色来显示哪些州具有可用属性。
我正在使用Leaflet绘制地图，并已使用Interactive Choropleth Map（https://leafletjs.com/examples/choropleth/）作为构建此地图的基础。

我已将"availability":"2"添加到us-states.js文件中，此处将显示属性的数量。我想插入一个PHP查询放入.js文件中，以获取该状态的属性数量。以下是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/

任何帮助将不胜感激！

Answer 1

您正在寻找的是wp_localize_script

执行查询
使用wp_register_script注册脚本
使用wp_localize_script使用查询结果对注册的脚本进行本地化
使用wp_enqueue_script排队脚本，该脚本引用WordPress在注册脚本之前添加的JavaScript数组

Answer 2

在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输出，除非添加了某些内容，否则更改不会太大。

Answer 3

我在函数文件中使用它来工作：

wp_register_script( 'scount', get_template_directory_uri() . '/assets/js/us-states.js' );

// Localize the script with our data that we want to use
$args = array(
  'post_type' => 'property',
  'fields' => 'ids',
  'meta_query' => array(
    array(
      'key' => 'state',
      'value' => 'NC'
    )
  )
);
$results = new WP_Query($args);
$completed = count($results->posts);
wp_localize_script( 'scount', 'completed', $completed );

   // The script can be enqueued now or later.
    wp_enqueue_script( 'scount' );

并在json文件中使用它：

( JSON.stringify(completed) )}

请注意，没有“;”最后！

将php添加到js文件

3 个答案: