$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 ) );wp_enqueue_script()wp_add_inline_script()
$args = array(
'post_type' => 'object',
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
$mask = array();
$mask['type'] = 'FeatureCollection';
while ( $query->have_posts() ) {
$query->the_post();
$geo = get_post_meta( get_the_ID(), '_geo', true );
$mask['features'][] = array(
'type' => 'Feature',
'id' => $key,
'geometry' => array (
'type' => 'Point',
'coordinates' => [(float) $geo['lat'], (float) $geo['lat']],
),
'properties' => array (
'balloonContentBody' => '<strong class="map-title"><a class="link" href="' . get_the_title() . '">' . get_the_title() . '</a></strong>',
'balloonContentFooter' => '<a class="hidden" href="#">Я был здесь!</a>',
'clusterCaption' => '<strong>' . get_the_title() . '</strong>',
'hintContent' => '<strong>' . get_the_title() . '</strong>'
)
);
}
}json_encode( $mask ) в обработчик в js. В поле _geo должен лежать массив: широта и долготаwp_add_inline_script(), это не супер подход, но, в моем случае было удобнее всегоwp_enqueue_script( 'ya-map-api' );
$ya_map_init .= "<script type='text/javascript'>
jQuery(function($){
ymaps.ready(init);
function init () {
var map = new ymaps.Map('ya-map', {
center: [" . $geo_center . "],
zoom: " . $geo_zoom . ",
controls: ['geolocationControl' ,'zoomControl'],
}, {
avoidFractionalZoom: false,
}),
objectManager = new ymaps.ObjectManager({
clusterize: false
});
objectManager.objects.options.set('preset', 'islands#nightCircleDotIcon');
map.geoObjects.add(objectManager);
var resortLabels = " . json_encode( $mask ) . ";
objectManager.add(resortLabels);
}
});
</script>";
wp_add_inline_script( 'ya-map-api', $ya_map_init );<div id="map" class="map"></div>add_action( 'wp_enqueue_scripts', 'ya_scripts' );
function ya_scripts() {
$ya_map_key = '96193550-a00q-czce-p3vb-uh52odq1qhil';
wp_register_script('ya-map-api', 'https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=' . $ya_map_key . '', array('jquery'), null, true);
}.map
[class*=ymaps-2][class*=-ground-pane]
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale")
-webkit-filter: grayscale(100%)
-moz-filter: grayscale(100%)
-ms-filter: grayscale(100%)
-o-filter: grayscale(100%)$variable = get_posts($args); и в цикле собираете массив по этому примеруget_post_meta() в цикле
get_posts() или wp_query(), мету с помощью get_post_meta() и циклом собираете json данные как в этом примере Проблема при добавлении 10 тыс точек на яндекс карты api?
$mask = array();
$mask['type'] = 'FeatureCollection';
foreach ( $variable as $key => $value ) {
$mask['features'][] = array(
"type" => 'Feature',
"id"=> $key,
"geometry" => array (
"type" => 'Point',
"coordinates" => [(float) $value->lat, (float) $value->long],
),
"properties" => array (
"balloonContentBody" => "<strong class='map-title'><a class='link' href='" . $value->post_link . "'>" . $value->post_title . "</a></strong>",
"balloonContentFooter" => "<a class='hidden' href='#'>Я был здесь!</a>",
"clusterCaption" => "<strong>" . $value->post_title . "</strong>",
"hintContent" => "<strong>" . $value->post_title . "</strong>"
)
);
}json_encode( $mask ) передать в обработчик как в этом примере https://yandex.ru/dev/maps/jsbox/2.1/object_manager/
$mask = array();
$mask['type'] = 'FeatureCollection';
foreach ( $variable as $key => $value ) {
$mask['features'][] = array(
'register-post-types.php' => 'Feature',
'id' => $key,
'geometry' => array (
'type' => 'Point',
'coordinates' => [(float) $value->lat, (float) $value->long],
),
'properties' => array (
'balloonContentBody' => '<strong class="map-title"><a class="link" href="' . $value->post_link . '">' . $value->post_title . '</a></strong>',
'balloonContentFooter' => '<a class="hidden" href="#">Я был здесь!</a>',
'clusterCaption' => '<strong>' . $value->post_title . '</strong>',
'hintContent' => '<strong>' . $value->post_title . '</strong>'
)
);
}json_encode( $mask ) вы можете передавать массив дальше в обработчик