如何将短码的$atts变量传递给插件的脚本函数

时间:2011-09-15 作者:Laxmidi

我需要将插件的$atts变量传递给javascript函数,但我不知道该怎么做。javascript函数需要shortcode的php纬度变量来构建映射。

我的插件如下所示:

<?php
/*
Plugin Name: Lax Google Map Plugin
Plugin URI: http://www.mysite.com
Description: Makes Map
Version: 1.0
Author URI: http://www.mysite.com
*/

function lax_google_map_init() {
    wp_enqueue_script(\'google-maps\', \'http://maps.googleapis.com/maps/api/js?sensor=false\');
    wp_enqueue_script(\'lax_google_map_script\', plugins_url(\'js/lax_google_map_script.js\', __FILE__), array(\'google-maps\',\'jquery\'));
}

add_action(\'init\', \'lax_google_map_init\');


function lax_google_map_maker($atts,$content=null) {

    $atts = shortcode_atts( array(
        \'width\' => \'600\', 
        \'height\'=>\'600\',
        \'latitude\'=>\'38.9205\'
        ),
        $atts);


    $output .= \'<div id="map_canvas" style="width:\'. $atts[\'width\'] .\'px; height: \'. $atts[\'height\'] .\'px; border:1px solid black;"></div>\';

    return $output;
}

 add_shortcode(\'lax-google-map\', \'lax_google_map_maker\');

?>
javascript文件如下所示:

jQuery.noConflict();

jQuery(document).ready(function($) {

  var latlng = new google.maps.LatLng(39.73, -76.02);
  var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

      var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

});
因此,我需要将“39.73”替换为如下内容:

伪代码:

var latlng=新谷歌。地图。纬度(+$atts[\'latitude]+,-76.02);

此外,javascript在短代码$atts可用之前加载。改变它的最好方法是什么?

抱歉,基本问题。我正在学习如何编写插件。

有什么建议吗?

非常感谢。

-拉克西米迪

更新:

如果我添加以下内容:

$params = array (
        \'latitude\'=>  \'39.01\',
        \'longitude\'=> \'-76.02\'
        );

    wp_localize_script(\'lax_google_map_script\', \'lax_map_params\', $params);
lax_google_map_init()

我补充道:

var latlng = new google.maps.LatLng( lax_map_params.latitude, csf_crime_map_params.longitude);
对于我的javascript函数,映射是有效的。如何将“39.01”替换为$atts[latitude] 和-76.02$atts[longitude] ? 我仍在学习php中的scope。非常感谢。

3 个回复
SO网友:kaiser

您需要一些初始(可能是全局)jsvar markers_array = [];. 然后使用ajax回调函数将标记插入到该数组中。

注册脚本

// Define
$root_url = plugin_dir_path(); // Example path
$ajax_nonce = \'your_nonce\';
$ajax_nonce_val = \'your_val\';

// Ajax
wp_register_script( \'json2\', false, false, false, true );
wp_enqueue_script( \'json2\' );

wp_enqueue_script( 
     \'ajax-script\'
    ,"{$root_url}js/ajax_json.js" // your ajax callback script that handles the request (inside a /js folder)
    ,array( 
        \'json2\'
     )
    ,false
    ,true 
);
wp_localize_script( 
     \'ajax-script\' 
    ,\'ajax_object\' // YOUR MAIN DATA OBJECT
    ,array( 
         \'ajaxurl\'          => admin_url( \'admin-ajax.php\' )
        ,$ajax_nonce    => wp_create_nonce( $ajax_nonce_val ) 
    ) 
);
初始标记
// inside some <script> part: You need the following php function to build your markers array:
// This js array will be used by your custom build markers js function to build the initial markers. It can also be used to update markers and overlays.
var mapsInitMarkers = <?php echo build_markers_array(); ?>;

// Markers builder callback function for init js-var
function build_markers_array()
{
    $output = \'\';
    $markers = array( /* DEFINE MARKERS HERE */ );
    foreach ( $markers as $marker )
    {
        // id, lat, lng, name
        $output .= "[
             {$marker[\'ID\']}, 
             {$marker[\'lat\']}, 
             {$marker[\'lng\']}, 
            \'{$marker[\'name\']}\', 
        ],";
    }
    $output = substr( $output, 0, -1 ); // get rid of last comma
    $output = "[{$output}]";

    return $output;
}
Ajax回调函数
function ajax_cb_fn() 
{

    check_ajax_referer( \'referer_name\', $ajax_nonce ); // needed if performed some update via some ex. form

    $output = \'\'; // do stuff here - example, use build_markers_array(); with some input to update your markers

    $response = json_encode( array( 
         \'data\' => $output 
    ) );
    header( "Content-Type: application/json" );
    echo $response;

    exit();
}
ajax\\u json内部的数据处理。现在你可以写一些document.ready() 函数在新的ajax json处理文件中。在那里,您可以通过ajax_object javascript对象。你可以使用$.post() 通过表单或其他方式执行数据处理。你也可以把你的记号笔碰到一些createMarkers js函数,您也可以使用它来构建初始数组(您需要在某处处理标记创建)。

为什么不应将此数据添加为标记元素属性,标记由浏览器渲染,数据刚刚处理。试想一下,如果你把数百个lat/lng ATT放进去,你的div会是什么样子。在短时间内,您将需要放弃对设备浏览器和上网本笔记本电脑、平板电脑等的支持。

SO网友:Toby

你可以使用wp_localize_script 将PHP变量放入JavaScript。

SO网友:Maciej Kuś

我会这样做:

在插件代码中,将数据纬度属性添加到div#map\\u画布:

$output .= \'<div id="map_canvas" data-latitude="\'.$atts[\'latitude\'].\'" style="width:\'. $atts[\'width\'] .\'px; height: \'. $atts[\'height\'] .\'px; border:1px solid black;"></div>\';
在javascript中,允许JQuery从div#map\\u画布读取属性数据纬度

var latlng = new google.maps.LatLng($(\'#map_canvas\').attr(\'data-latitude\'), -76.02);
可能需要类似的经度代码段。。

使用前缀为“data”的属性进行html5验证。

希望有帮助

结束

相关推荐

nested Shortcode doesn't work

短代码:[permalink][title][/permalink] 输出:<a href=\"foobar\">[title]</a> Wordpress短码API sais,正确无误:http://codex.wordpress.org/Shortcode_API#Nested_Shortcodes有什么想法吗?