Как передать метку на карту по координатам из админки?

1 ответ

Сделал страницу настроек в адмике Wordpress.

add_action( 'admin_menu', 'filter_map_menu_page', 25 );  function filter_map_menu_page() {     add_menu_page(         'Настройки карты', // тайтл страницы         'Настройки карты', // текст ссылки в меню         'manage_options', // права пользователя, необходимые для доступа к странице         'true_filter', // ярлык страницы         'true_filter_map_callback', // функция, которая выводит содержимое страницы         'dashicons-images-alt2', // иконка, в данном случае из Dashicons         4.3 // позиция в меню     ); }  // Регистрация настроек add_action( 'admin_init', 'true_filter_settings_init' );  function true_filter_settings_init() {     register_setting( 'true_filter_settings', 'latitude_option' );     register_setting( 'true_filter_settings', 'longitude_option' );      add_settings_section( 'true_filter_section', '', 'true_filter_section_callback', 'true_filter' );      add_settings_field( 'latitude_field', 'Широта', 'latitude_field_callback', 'true_filter', 'true_filter_section' );     add_settings_field( 'longitude_field', 'Долгота', 'longitude_field_callback', 'true_filter', 'true_filter_section' ); }  function true_filter_section_callback() {     // echo '&lt;p&gt;Описание секции&lt;/p&gt;'; }  function latitude_field_callback() {     $latitude = get_option( 'latitude_option' );     echo '&lt;input type="text" name="latitude_option" value="' . esc_attr( $latitude ) . '" /&gt;'; }  function longitude_field_callback() {     $longitude = get_option( 'longitude_option' );     echo '&lt;input type="text" name="longitude_option" value="' . esc_attr( $longitude ) . '" /&gt;'; }  function true_filter_map_callback() {     echo '&lt;div class="wrap"&gt; 	&lt;h1&gt;' . get_admin_page_title() . '&lt;/h1&gt; 	&lt;form method="post" action="options.php"&gt;';      settings_fields( 'true_filter_settings' ); // название настроек     do_settings_sections( 'true_filter' ); // ярлык страницы, не более     submit_button(); // функция для вывода кнопки сохранения      echo '&lt;/form&gt;';  }  // Добавляем уведомление при сохранении настроек add_action( 'admin_notices', 'true_filter_settings_notice' );  function true_filter_settings_notice() {     settings_errors(); }

add_action( 'admin_menu', 'filter_map_menu_page', 25 ); function filter_map_menu_page() { add_menu_page( 'Настройки карты', // тайтл страницы 'Настройки карты', // текст ссылки в меню 'manage_options', // права пользователя, необходимые для доступа к странице 'true_filter', // ярлык страницы 'true_filter_map_callback', // функция, которая выводит содержимое страницы 'dashicons-images-alt2', // иконка, в данном случае из Dashicons 4.3 // позиция в меню ); } // Регистрация настроек add_action( 'admin_init', 'true_filter_settings_init' ); function true_filter_settings_init() { register_setting( 'true_filter_settings', 'latitude_option' ); register_setting( 'true_filter_settings', 'longitude_option' ); add_settings_section( 'true_filter_section', '', 'true_filter_section_callback', 'true_filter' ); add_settings_field( 'latitude_field', 'Широта', 'latitude_field_callback', 'true_filter', 'true_filter_section' ); add_settings_field( 'longitude_field', 'Долгота', 'longitude_field_callback', 'true_filter', 'true_filter_section' ); } function true_filter_section_callback() { // echo '<p>Описание секции</p>'; } function latitude_field_callback() { $latitude = get_option( 'latitude_option' ); echo '<input type="text" name="latitude_option" value="' . esc_attr( $latitude ) . '" />'; } function longitude_field_callback() { $longitude = get_option( 'longitude_option' ); echo '<input type="text" name="longitude_option" value="' . esc_attr( $longitude ) . '" />'; } function true_filter_map_callback() { echo '<div class="wrap"> <h1>' . get_admin_page_title() . '</h1> <form method="post" action="options.php">'; settings_fields( 'true_filter_settings' ); // название настроек do_settings_sections( 'true_filter' ); // ярлык страницы, не более submit_button(); // функция для вывода кнопки сохранения echo '</form>'; } // Добавляем уведомление при сохранении настроек add_action( 'admin_notices', 'true_filter_settings_notice' ); function true_filter_settings_notice() { settings_errors(); }

Как передать метку на карту из широты и долготы указанных в этих настройках?

Дополнительно:

Создать карту, добавить на неё метку по координатам. Вы справку то по яндексу открывали?

freeExec, А вы вопрос читали? Метку нужно передать из страницы настроек в админке wordpress. То есть чтобы можно было редактировать метки из админки, а не кодом в карте (в файле js имеется ввиду).

Nik Master, что такое "редактировать метки из админки", я не понимаю тогда, если это не метка на карте?

freeExec, Допустим нам нужно добавить метку на карту, но мы не знаем как это сделать через js. Заходим на созданную страницу настроек в админке и вписываем нужную широту и долготу для метки, жмём сохранить и метка по нашим координатам появляется на карте. Но я никак не могу подружить карту и страницу настроек. Вот собственно вопрос. Как добавлять метку с нашей страницы настроек?)

Nik Master, ну смотря как задаются метки в админке.
если поля с координатами передавайте его на фронт в json
а в js расставлять метки согласно полученному массиву.

Froggyweb, А подскажете как передать в json на фронт инфу полученную в полях на странице настроек?

Nik Master, wp не знаю погуглить getOption какой-нибудь

Ну у Вас же в коде написано
$latitude = get_option( 'latitude_option' );
Вот так и получают опции из настроек.
А вот так вставляют в html (написано в том же коде):

echo '&lt;input type="text" name="latitude_option" value="' . esc_attr( $latitude ) . '" /&gt;';

echo '<input type="text" name="latitude_option" value="' . esc_attr( $latitude ) . '" />';

Делаете аналогично, но не с input, а с кодом вставки карты.

YBB, В js не передаётся значение поля.

В js не передаётся значение поля.

Чего это?

&lt;script&gt;   var latitude = '&lt;?php echo get_option( 'latitude_option' ); ?&gt;';   alert(latitude); &lt;/script&gt;

Вставьте этот код в шаблон и посмотрите.

p.s. Значение опции не должно содержать апострофов и переводов строки. Если содержит, нужно дополнительно фильтровать значение.

YBB, Карта формируется js, при чём здесь HTML. В С этим кодом я метку из админки в карту вставить не смогу.

Nik Master, HTML при том, что то, что между <script> и </script> - javascript, сокращенно js. Если Вы под js имели в виду не код на языке javascript, а отдельный файл с расширением .js (точка имеет значение и смысл), то переменные, определенные в html внутри <script>...</script> доступны во внешнем .js, разумеется, если он подключен после определения переменной. Это стандартный способ передачи переменных в скрипты.

При желании можно и .js (в смысле отдельный файл) сдать на обработку php, используя AddHandler и хедер Content-type, но тогда к нему надо еще и wp-load.php подключать. Оно того не стоит. Прокинуть переменную из шаблона в скрипт проще.

Ответы:

Тоже решал подобную проблему, в итоге решил собирать весь скрипт на php. Сначала собираю обычный массив, как в документации object_manager

$mask         = array(); $mask['type'] = 'FeatureCollection';  foreach ( $resorts as $key =&gt; $resort ) {  	$geo_point = get_post_meta( $resort-&gt;ID, '_geo_location', true ); 	$geo_point = explode( ',', $geo_point );  	// Собираем php массив для карты, который энкодим в json формат 	$mask['features'][] = array( 		'type'       =&gt; 'Feature', 		'id'         =&gt; $key, 		'geometry'   =&gt; array ( 			'type'        =&gt; 'Point', 			'coordinates' =&gt; [(float) trim($geo_point[0]), (float) trim($geo_point[1])], 		), 		'properties' =&gt; array ( 			'balloonContentBody' =&gt; '&lt;strong class="balloon-title"&gt;&lt;a class="link" href="' . esc_url( get_the_permalink( $resort-&gt;ID ) ) . '" target="_blank"&gt;' . $resort-&gt;post_title . '&lt;/a&gt;&lt;/strong&gt;', 			'clusterCaption'     =&gt; '&lt;strong&gt;' . $resort-&gt;post_title . '&lt;/strong&gt;', 			'hintContent'        =&gt; '&lt;strong&gt;' . $resort-&gt;post_title . '&lt;/strong&gt;' 		) 	); }

$mask = array(); $mask['type'] = 'FeatureCollection'; foreach ( $resorts as $key => $resort ) { $geo_point = get_post_meta( $resort->ID, '_geo_location', true ); $geo_point = explode( ',', $geo_point ); // Собираем php массив для карты, который энкодим в json формат $mask['features'][] = array( 'type' => 'Feature', 'id' => $key, 'geometry' => array ( 'type' => 'Point', 'coordinates' => [(float) trim($geo_point[0]), (float) trim($geo_point[1])], ), 'properties' => array ( 'balloonContentBody' => '<strong class="balloon-title"><a class="link" href="' . esc_url( get_the_permalink( $resort->ID ) ) . '" target="_blank">' . $resort->post_title . '</a></strong>', 'clusterCaption' => '<strong>' . $resort->post_title . '</strong>', 'hintContent' => '<strong>' . $resort->post_title . '</strong>' ) ); }

С помощью json_encode() и wp_add_inline_script() вставляю все во фронт

$frontend_scripts = "&lt;script type='text/javascript'&gt;  	jQuery(function($){  		ymaps.ready(init);  		function init () { 			var map = new ymaps.Map('ya-map', { 					center: [55.76, 37.64], 					zoom: 4, 					controls: ['geolocationControl' ,'zoomControl'], 				}, { 					avoidFractionalZoom: false, 				}); 				 			map.behaviors.disable("scrollZoom");  			var objectManager = new ymaps.ObjectManager({ 				clusterize: true, 				gridSize: 32, 				clusterDisableClickZoom: true 			});  			objectManager.objects.options.set( 'preset', 'islands#greenCircleDotIcon' ); 			objectManager.clusters.options.set( 'preset', 'islands#greenClusterIcons' );  			map.geoObjects.add(objectManager);  			var pointLabels = " . json_encode( $mask ) . "; 			objectManager.add(pointLabels);  			// эта костыльная хуйня центрирует карту и делает автозум, чтобы попали все точки 			var geoObjects = ymaps.geoQuery(pointLabels) 				.applyBoundsToMap(map, { 					checkZoomRange: true 				});  		}  	});  &lt;/script&gt;";  wp_add_inline_script( 'main', minify_js( $frontend_scripts ) );

$frontend_scripts = "<script type='text/javascript'> jQuery(function($){ ymaps.ready(init); function init () { var map = new ymaps.Map('ya-map', { center: [55.76, 37.64], zoom: 4, controls: ['geolocationControl' ,'zoomControl'], }, { avoidFractionalZoom: false, }); map.behaviors.disable("scrollZoom"); var objectManager = new ymaps.ObjectManager({ clusterize: true, gridSize: 32, clusterDisableClickZoom: true }); objectManager.objects.options.set( 'preset', 'islands#greenCircleDotIcon' ); objectManager.clusters.options.set( 'preset', 'islands#greenClusterIcons' ); map.geoObjects.add(objectManager); var pointLabels = " . json_encode( $mask ) . "; objectManager.add(pointLabels); // эта костыльная хуйня центрирует карту и делает автозум, чтобы попали все точки var geoObjects = ymaps.geoQuery(pointLabels) .applyBoundsToMap(map, { checkZoomRange: true }); } }); </script>"; wp_add_inline_script( 'main', minify_js( $frontend_scripts ) );

Это добавление через json инфу, а к странице настройки как прикрутить, чтобы в админку зашёл и накидал меток по координатам какие нужны на карту?
Nik Master, разве ваш код не решает как раз эту задачу?
Артем Золин, Я бы не спрашивал, если бы работало.) Не передаются значения полей.
Не передаются значения

А они в админке сохраняются?

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Ирина WP Ответ

Координаты из страницы настроек WordPress нужно передавать в JavaScript не через ручную вставку строк в HTML, а через wp_localize_script() или wp_add_inline_script(). Тогда данные будут доступны карте как объект, и вы избежите проблем с кавычками, запятыми и экранированием.

Сначала зарегистрируйте и подключите ваш JS-файл:

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'site-map',
        get_template_directory_uri() . '/assets/js/map.js',
        [],
        '1.0.0',
        true
    );
 
    wp_localize_script('site-map', 'SiteMapData', [
        'lat' =&gt; (float) get_option('latitude_option'),
        'lng' =&gt; (float) get_option('longitude_option'),
    ]);
});

add_action('wp_enqueue_scripts', function () { wp_enqueue_script( 'site-map', get_template_directory_uri() . '/assets/js/map.js', [], '1.0.0', true ); wp_localize_script('site-map', 'SiteMapData', [ 'lat' => (float) get_option('latitude_option'), 'lng' => (float) get_option('longitude_option'), ]); });

В файле map.js используйте эти значения:

document.addEventListener('DOMContentLoaded', function () {
    const lat = Number(SiteMapData.lat);
    const lng = Number(SiteMapData.lng);
 
    if (!lat || !lng) {
        return;
    }
 
    // пример для карты
    const coords = [lat, lng];
    console.log(coords);
});

document.addEventListener('DOMContentLoaded', function () { const lat = Number(SiteMapData.lat); const lng = Number(SiteMapData.lng); if (!lat || !lng) { return; } // пример для карты const coords = [lat, lng]; console.log(coords); });

Если координаты задаются в админке через Settings API, обязательно валидируйте их при сохранении:

register_setting('true_filter_settings', 'latitude_option', [
    'sanitize_callback' =&gt; 'floatval',
]);
 
register_setting('true_filter_settings', 'longitude_option', [
    'sanitize_callback' =&gt; 'floatval',
]);

register_setting('true_filter_settings', 'latitude_option', [ 'sanitize_callback' => 'floatval', ]); register_setting('true_filter_settings', 'longitude_option', [ 'sanitize_callback' => 'floatval', ]);

Если меток несколько, храните не две отдельные опции, а массив точек или CPT “Объекты на карте”. Для одной метки двух options достаточно. После сохранения проверьте исходный код страницы: объект SiteMapData должен содержать актуальные координаты.

Не выводите координаты напрямую в JS без проверки, особенно если они сохраняются из админской формы. Даже администратор может случайно вставить запятую вместо точки или лишний текст. На фронте всегда приводите значения к числу и проверяйте диапазон: широта от -90 до 90, долгота от -180 до 180. Если данные невалидны, карту лучше не инициализировать, чем показывать ошибку JavaScript всем посетителям.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 0 ответов

Как передать метку на карту по координатам из админки?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно