將顏色更改php映射到.js

Question

我正在一張美國地圖上工作，該州的州可以通過更改州的顏色來獲得可用的屬性。
我將Leaflet用於地圖，並已使用Interactive Choropleth Map（ https://leafletjs.com/examples/choropleth/ ）作為構建此地圖的基礎。

我在us-states.js文件中添加了“ availability”：“ 2”，這是將顯示屬性數量的地方。 我想在.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)
        };
}

我已經將此添加到functions.php文件中：

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文件：

alert(completed);

我得到的結果是有效的，這是在開發人員工具中查看時的輸出：

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

這是地圖所在的頁面： https : //www.thekeithcorp.com/interactive-map/

但這並沒有改變地圖狀態顏色！ 我在js文件中打錯電話了嗎？ 拉我的頭發，任何幫助將不勝感激！

編輯

我已將問題隔離到警報中（已完成）； 添加到js文件。 當我將警報添加到js文件時，頁面中斷。 關於如何將其添加到.js文件的任何想法？

這是它的添加方式：

{"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]]]}},

救命！

Answer 1

我使用這個來工作：（JSON.stringify（completed））

沒有的;