javascript - 在 WordPress 中包含包含 Php 的 JavaScript

Question

我目前正在制作一个交互式 map (使用 OpenStreetMap 和 OpenLayers)，它可以在本地网站上按照我想要的方式工作(请参阅此屏幕截图:/image/Ev08B.jpg)。

我的代码使用 Html、Php 和 JavaScript。

我希望将此交互式 map 集成到我的 WordPress 网站的页面中。对于 Php 部分，很简单，我使用短代码技术。我已经测试过了，它可以工作，包括与数据库的通信。

但是， map 本身是一个 JavaScript 脚本。我很想使用“enqueue_script”技术，但问题是我的脚本包含一些 Php，用于传递一个 json 数组，该数组基本上包含在 map 上放置标记的信息。

问题是:是否可以将此脚本包含在 WordPress 页面上(与我包含 Php 的页面相同)，如果可以，我该怎么做？

这是(简化的)Php 代码。它有效，但它可能会帮助你们理解我想做什么:

function register_shortcodes(){
    add_shortcode('fidu-display-map', 'display_map');
}
add_action( 'init', 'register_shortcodes');

function display_map(){

    generate_html();
    get_search_results();
    generate_map();
}

function generate_html(){

    echo "<div id=\"basicMap\" style=\"width: 100%;
            height: 100%; coordinates
            margin: 0;\"></div>";
}

function get_search_results(){

    global $wpdb;
    global $result;

    $result = $wpdb->get_results("SELECT * FROM search_results;", ARRAY_A);
}

function generate_map(){
    global $result;
    $res_lon = array();
    //[... other declarations]
    $res_link = array();
    foreach ($result as $row) {
        array_push($res_lon, $row['lon']);
        //[... other pushs]
        array_push($res_link, $row['societyLink']);
    }
    $search_result = array(
        $res_lon,
        //[... other merging]
        $res_link
    );
}

现在这是 JavaScript，其中 Json 部分给我带来了一些问题，因为它依赖于上面的 Php:

<script>

    document.addEventListener("DOMContentLoaded", function()
    {
        init();
    }, false);

    var map;

    function init(){
        map = new OpenLayers.Map('basicMap');

        var mapnik = new OpenLayers.Layer.OSM();
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var centerPosition = new OpenLayers.LonLat(-85.00,38.00).transform( fromProjection, toProjection);
        var zoom           = 5;

        map.addLayer(mapnik);

        map.setCenter(centerPosition, zoom);


        addPoints(map);
    }

    function addPoints(map){
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        //get positions from the search result from the database
        var positions = <?php echo json_encode($search_result) ?>;
        var infos = <?php echo json_encode($search_result) ?>;

        var coordinates = new Array();
        var pointStyle = {  externalGraphic: 'images/marker-blue.png',
            graphicWidth: 21,
            graphicHeight: 25,
            graphicYOffset: -24};

        // Layer
        var pointsLayer = new OpenLayers.Layer.Vector("Points Layer");


        // Add points to the layer
        for(i=0;i<positions[0].length;i++){
            //coordinates.push(new OpenLayers.Geometry.Point(positions[0][i], positions[1][i]).transform(fromProjection, toProjection));
            var pointFeature = new OpenLayers.Feature.Vector(
                new OpenLayers.Geometry.Point(positions[0][i], positions[1][i]).transform(fromProjection, toProjection),
                {description : infos[2][i]+'<br>'+infos[3][i]+'<br>'+infos[4][i]+' - '+infos[5][i]+'<br>'+infos[6][i]+'<br>Link: <a href="'+infos[7][i]+'">'+infos[7][i]+'</a>'},
                pointStyle
            );
            pointsLayer.addFeatures(pointFeature);
        }

        map.addLayer(pointsLayer);

        //Add a selector control to the vectorLayer with popup functions
        var controls = {
            selector: new OpenLayers.Control.SelectFeature(pointsLayer, { onSelect: createPopup, onUnselect: destroyPopup })
        };

        map.addControl(controls['selector']);
        controls['selector'].activate();
    }

    function createPopup(feature) {
        feature.popup = new OpenLayers.Popup.FramedCloud("pop",
            feature.geometry.getBounds().getCenterLonLat(),
            null,
            '<div class="markerContent">'+feature.attributes.description+'</div>',
            null,
            true,
            function() { controls['selector'].unselectAll(); }
        );
        map.addPopup(feature.popup);
    }

    function destroyPopup(feature) {
        feature.popup.destroy();
        feature.popup = null;
    }

</script>

Answer 1

您可以做的就是将这些变量放在您的 javascript 函数之外。例如，您可以将其放入 <head>像:

var mapPoints = {
    positions: <?php echo json_encode($search_result) ?>,
    infos: <?php echo json_encode($search_result) ?>
}

现在，如果您创建一个 javascript 文件并使用 enqueue_scripts 将其添加到您的页面，您仍然可以访问 mapPoints在你的函数中。