G\'day mate;)
我通过在正文的一个脚本标记中输出变量来实现这一点。我仔细研究了您的代码,并提出了以下解决方案:
function lax_google_map_init() {
// Don\'t bother loading the scripts if we\'re in the admin area
if ( is_admin() ) {
return;
}
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( \'wp_print_scripts\', \'lax_google_map_init\' );
function lax_google_map_maker( $atts, $content = null ) {
// Default params.
$atts = shortcode_atts( array (
\'latitude\'=>\'-25.068302\',
\'longitude\'=>\'-130.095581\',
\'zoom\' => 18,
\'id\' => \'map_canvas\',
\'width\' => \'500px\',
\'height\' => \'500px\'
), $atts );
$output .= \'<div id="\' . esc_attr( $atts[\'id\'] ) . \'" style="width:\' . esc_attr( $atts[\'width\'] ) . \'; height: \'. esc_attr( $atts[\'height\'] ) .\'; border:1px solid black;"></div>\';
$output .=
"<script>" . "\\n" .
"var lax_map_params_" . $atts[\'id\'] . " = " . json_encode( $atts ) . "; lax_google_map_maker_js( lax_map_params_" . $atts[\'id\'] . " );" . "\\n" .
"</script>" . "\\n";
return $output;
}
add_shortcode( \'lax-google-map\', \'lax_google_map_maker\' );
// [lax-google-map latitude=\'-66.552635\' longitude=\'84.137421\' zoom=\'12\'] // no id, usees default
// [lax-google-map latitude=\'65.032366\' longitude=\'-376.747681\' zoom=\'12\' id="map_1"] // id specified. Will be used in js variable name, so no hyphens or other chars that will break js variable names allowed.
// [lax-google-map latitude=\'-25.068302\' longitude=\'-130.095581\' zoom=\'12\' id="map_2" width="200px" height="200px"] // custom dimensions
// [lax-google-map latitude=\'-34.397\' longitude=\'150.644\' zoom=\'12\' id="map_3"]
这是lax\\u google\\u map\\u脚本。js文件:
jQuery(document).ready(function($) {
// alert (\'hi\');
});
function lax_google_map_maker_js( args ) {
// Default js args. Args passed to function will override these.
var default_args = {
latitude : -34.397,
longitude : 150.644,
id : \'map_canvas\',
zoom : 8
}; // @link http://www.openjs.com/articles/optional_function_arguments.php
for ( var index in default_args ) {
if ( typeof args[index] == "undefined" ) {
args[index] = default_args[index];
}
}
var latlng = new google.maps.LatLng(args[\'latitude\'], args[\'longitude\']);
var myOptions = {
zoom: parseInt( args[\'zoom\'] ),
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// alert (\'hi\'); // just showing that you can use jQuery with the dollar method in here.
var map = new google.maps.Map(document.getElementById( args[\'id\'] ), myOptions);
}
注意:localize\\u脚本只能处理1级深度的js数组,所以我个人没有这么做
(source - see comments).
我从一个great WPSE answer 由Bainternet提供。
我确实认为最好的方法是将所有内容都放在一个类中,并从一个属性中输出连接的js,该属性包装在格式正确的js标记中,该js标记是在wp\\U页脚操作上触发的,该操作由一个检查是否使用了短码的方法触发的。这是将来修订时需要考虑的问题。Optimal Script Loading
在我最初的回答中,我删除了jQuery位,因为脚本中没有使用jQuery。jQuery。无冲突();在使用WP包含的jQuery版本时不需要。在修改后的答案中,我将jQuery的内容放在顶部,但将lax\\u google\\u map\\u maker\\u js()函数移出了该块,否则会发生错误。