Мне нужно передать переменную $ atts плагина в функцию javascript, но я не уверен, как это сделать. Для построения карты функция javascript нуждается в переменной php широты shortcode.
Мой плагин выглядит так:
<?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 = new google.maps.LatLng (+ $ atts ['широта'] +, -76.02);
Кроме того, javascript загружается до того, как доступен короткий код $ atts. Каков наилучший способ его изменить?
Извините, за основные вопросы. Я учу, как писать плагин.
Какие-либо предложения?
Спасибо.
-Laxmidi
ОБНОВИТЬ:
Если я добавлю это:
$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. Спасибо.
Вы должны иметь некоторый начальный (возможно, глобальный) js var 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; }
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(); }
Теперь вы можете написать некоторую функцию document.ready() внутри вашего нового файла обработки ajax json. Там вы можете получить доступ к своим данным через javascript-объект ajax_object . Вы можете использовать $.post() для обработки данных через формы или иначе. Вы также можете createMarkers маркеры в некоторой функции createMarkers которую вы также можете использовать для создания исходного массива (вам нужно обработать создание маркера где-нибудь.
Пометьте, чтобы get был обработан браузером, только что обработанные данные. Представьте себе, как ваш div будет выглядеть, если вы сбросите сотни лат / лин. За короткое время вам потребуется отказаться от поддержки браузеров устройств и ноутбуков, планшетов и т. Д.
Вы можете использовать wp_localize_script, чтобы взять ваши PHP-переменные и поместить их в JavaScript.
Я бы сделал так:
в коде плагина добавить данные-широту attr в div # map_canvas:
$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 читать атрибуты data-latitude из div # map_canvas
var latlng = new google.maps.LatLng($('#map_canvas').attr('data-latitude'), -76.02);
Вероятно, вам понадобятся аналогичные фрагменты кода для долготы.
используйте атрибуты с префиксом «data-», чтобы иметь проверку html5.
Надеюсь, поможет