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

Question

[Nik Master]

Сделал страницу настроек в адмике 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 '<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();
}

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

Comments

[freeExec]

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

[Nik Master]

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

[freeExec]

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

[Nik Master]

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

[Froggyweb]

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

[Nik Master]

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

[Froggyweb]

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

[Юрий]

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

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

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

[Nik Master]

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

[Юрий]

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

Чего это?

<script>
  var latitude = '<?php echo get_option( 'latitude_option' ); ?>';
  alert(latitude);
</script>

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

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

[Nik Master]

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 подключать. Оно того не стоит. Прокинуть переменную из шаблона в скрипт проще.

Answer 1

[Артем Золин]

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

$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 = "<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 ) );

Comments

[Nik Master]

Это добавление через json инфу, а к странице настройки как прикрутить, чтобы в админку зашёл и накидал меток по координатам какие нужны на карту?

[Артем Золин]

Nik Master, разве ваш код не решает как раз эту задачу?

[Nik Master]

Артем Золин, Я бы не спрашивал, если бы работало.) Не передаются значения полей.

[Юрий]

Не передаются значения

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