将颜色更改php映射到.js [英] Map color change php to .js

问题描述

我正在制作一张美国地图，其中通过更改州的颜色为其州提供了可用属性的州.
我正在为地图使用Leaflet，并使用了交互式Choropleth地图( https://leafletjs.com/examples/choropleth/)作为构建此基础.

I am working on a USA map with states to which states have available properties by changing the color of the state.
I am using Leaflet for the map and have used the Interactive Choropleth Map (https://leafletjs.com/examples/choropleth/) as a basis to build this.

我在us-states.js文件中添加了"availability":"2"，这是将显示属性数量的地方.我想插入一个PHP查询 放入.js文件中，以提取该状态的属性数量.这是us-states.js文件中的示例，因此您可以查看布局:

I have added "availability":"2" to the us-states.js file, this is where the number of properties will be shown. I would like to insert a php query into the .js file to pull the number of properties for that state. Here is a sample from the us-states.js file so that you can see the layout:

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

我正在用它来改变颜色:

And I am using this to change color:

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

我已将其添加到functions.php文件中:

I have added this to the functions.php file:

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

然后我将其用于将结果保存到.js文件中:

And I using this to get the result into the .js file:

alert(completed);

我正在获得结果，这是在开发人员工具中查看时的输出:

I am getting the result working, this is the output when I view in developer tools:

<script type='text/javascript'>
/* <![CDATA[ */
var completed = 2;
/* ]]> */
</script>

这是地图所在的页面: https://www.thekeithcorp.com/交互式地图/

This is the page where the map is located: https://www.thekeithcorp.com/interactive-map/

但是它并没有改变地图状态的颜色！我在js文件中打错电话了吗?拉出我的头发，任何帮助将不胜感激！

But it is not changing the map state color! Am I calling incorrectly in the js file? Pulling my hair out, any help would be appreciated!

编辑

我已将问题隔离到警报中(已完成)；已添加到js文件中.当我将警报添加到js文件时，页面中断.关于如何将其添加到.js文件的任何想法?

I have isolated the problem to the alert(completed); added to the js file. the page breaks when I add the alert to the js file. Any ideas on how I should add this to the .js file?

这是它的添加方式:

{"type":"Feature","id":"37","properties":{"name":"North Carolina","availability":alert(completed);},"geometry":{"type":"Polygon","coordinates":[[[-80.978661,36.562108],[-80.294043,36.545677],[-79.510841,36.5402],[-75.868676,36.551154],[-75.75366,36.151337],[-76.032984,36.189676],[-76.071322,36.140383],[-76.410893,36.080137],[-76.460185,36.025367],[-76.68474,36.008937],[-76.673786,35.937736],[-76.399939,35.987029],[-76.3616,35.943213],[-76.060368,35.992506],[-75.961783,35.899398],[-75.781044,35.937736],[-75.715321,35.696751],[-75.775568,35.581735],[-75.89606,35.570781],[-76.147999,35.324319],[-76.482093,35.313365],[-76.536862,35.14358],[-76.394462,34.973795],[-76.279446,34.940933],[-76.493047,34.661609],[-76.673786,34.694471],[-76.991448,34.667086],[-77.210526,34.60684],[-77.555573,34.415147],[-77.82942,34.163208],[-77.971821,33.845545],[-78.179944,33.916745],[-78.541422,33.851022],[-79.675149,34.80401],[-80.797922,34.820441],[-80.781491,34.935456],[-80.934845,35.105241],[-81.038907,35.044995],[-81.044384,35.149057],[-82.276696,35.198349],[-82.550543,35.160011],[-82.764143,35.066903],[-83.109191,35.00118],[-83.618546,34.984749],[-84.319594,34.990226],[-84.29221,35.225734],[-84.09504,35.247642],[-84.018363,35.41195],[-83.7719,35.559827],[-83.498053,35.565304],[-83.251591,35.718659],[-82.994175,35.773428],[-82.775097,35.997983],[-82.638174,36.063706],[-82.610789,35.965121],[-82.216449,36.156814],[-82.03571,36.118475],[-81.909741,36.304691],[-81.723525,36.353984],[-81.679709,36.589492],[-80.978661,36.562108]]]}},

帮助！

推荐答案

我可以使用以下代码来工作: (JSON.stringify(completed))

I got this to work using this: ( JSON.stringify(completed) )

没有;

这篇关于将颜色更改php映射到.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！