alekone
  • 0
Новичок

Есть ли способ отобразить все мои сообщения на одной карте Google?

  • 0

Я хотел бы «геотэгировать» все свои сообщения и отображать их на одной карте Google.

Share
  1. Думаю, вы сможете решить этот вопрос, прочитав ответы на вопрос « Как лучше показать карту отмеченных постов? ». Если вы не можете решить его после прочтения этого вопроса, отредактируйте свой вопрос, чтобы уточнить, что вы пробовали, а что не сработало.

    • 0
  2. Можно сделать это без каких-либо плагинов, вам нужен только Google Maps API.

    Обратите внимание, что если вы планируете иметь 20 или более маркеров на одной странице, вам необходимо геолокировать сообщения, используя координаты, а не адреса.

    Чтобы сохранить координаты из адреса, вы можете:

    1. вручную использовать службу (что-то вроде этого )
    2. вызывать геокодирование карт Google из администратора WP при создании или обновлении сообщения

    Как реализовать второй вариант, не имеет строгого отношения к вопросу, и я не буду учитывать его в своем ответе, но посмотрите этот пример Maps API, чтобы увидеть, насколько просто получить координаты из адреса.

    Поэтому в этом ответе я предполагаю, что в сообщениях есть настраиваемое поле «координаты», где координаты хранятся в виде строки из двух значений, разделенных запятыми, например: '38.897683,-77.03649' .

    Я также предполагаю, что в файле page-google-map.php сохранен шаблон страницы.

    Поместите следующий код вfunctions.php

    add_action( 'wp_enqueue_scripts', 'enqueue_gmap' );
    
    function enqueue_gmap() {
        // script goes only in the map page template
        if ( ! is_page_template('page-google-map.php') ) return;
    
        wp_register_script( 'google-maps-api', '//maps.google.com/maps/api/js?sensor=false', false, false );
        wp_register_script( 'posts_map', get_template_directory_uri().'/js/mygmap.js', false, false, true );
        wp_enqueue_script( 'google-maps-api' );
        wp_enqueue_script( 'posts_map' );
    
        // use a custom field on the map page to setup the zoom
        global $post;
        $zoom = (int) get_post_meta( $post->ID, 'map_zoom', true );
        if ( ! $zoom ) $zoom = 6;
    
        $map_data = array( 
            'markers' => array(), 
            'center'  => array( 41.890262, 12.492310 ), 
            'zoom'    => $zoom,
        );
        $lats  = array();
        $longs = array();
    
        // put here your query args
        $map_query = new WP_Query( array( 'posts_per_page' => -1, ) );
    
        // Loop
        if ( $map_query->have_posts() ) : 
            while( $map_query->have_posts() ) : $map_query->the_post();
                $meta_coords = get_post_meta( get_the_ID(), 'coords', true );
                if ( $meta_coords ) {
                    $coords = array_map('floatval', array_map( 'trim', explode( ",", $meta_coords) ) );
                    $title = get_the_title();
                    $link  = sprintf('<a href="%s">%s</a>', get_permalink(), $title);
                    $map_data['markers'][] = array(
                        'latlang' => $coords,
                        'title'   => $title,
                        'desc'    => '<h3 class="marker-title">'.$link.'</h3><div class="marker-desc">'.get_the_excerpt().'</div>',
                    );
                    $lats[]  = $coords[0];
                    $longs[] = $coords[1];
                }
            endwhile;
            // auto calc map center
            if ( ! empty( $lats ) )
                $map_data['center'] = array( 
                    ( max( $lats ) + min( $lats ) ) /2,
                    ( max( $longs ) + min( $longs ) ) /2 
                );
        endif; // End Loop
    
        wp_reset_postdata;
        wp_localize_script( 'posts_map', 'map_data', $map_data );
    }
    

    Как видите, в шаблоне страницы карты я ставлю в очередь

    • API-скрипт карты Google
    • скрипт, mygmap.js расположенный в подпапке ‘js’ темы

    также, зацикливая сообщения, я заполняю массив $map_data и с помощью wp_localize_script этого массива передаю этот массив js на странице.

    Теперь mygmap.js будет содержать:

    function map_initialize() {
        var map_div     = document.getElementById( 'map' );
            map_markers = map_data.markers,
            map_center  = new google.maps.LatLng( map_data.center[0], map_data.center[1] ),
            map_zoom    = Number( map_data.zoom ),
            map         = new google.maps.Map( document.getElementById( 'map' ), {
                zoom      : map_zoom,
                center    : map_center,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            } );
    
        if ( map_markers.length ) {
            var infowindow = new google.maps.InfoWindow(),
                marker, 
                i;
            for ( i = 0; i < map_markers.length; i++ ) {  
                marker = new google.maps.Marker( {
                    position : new google.maps.LatLng(
                        map_markers[i]['latlang'][0], 
                        map_markers[i]['latlang'][1]
                    ),
                    title    : map_markers[i]['title'],
                    map      : map
                } );
                google.maps.event.addListener( marker, 'click', ( function( marker, i ) {
                    return function() {
                        infowindow.setContent( map_markers[i]['desc'] );
                        infowindow.open( map, marker );
                    }
                } )( marker, i ) );
            }
        }
    };
    google.maps.event.addDomListener( window, 'load', map_initialize );
    

    JavaScript не связан с WP, и я поместил его здесь только для того, чтобы показать использование map_data var. Я не js-разработчик и код более-менее полностью взят отсюда

    Это все. Просто создайте шаблон страницы и вставьте div с идентификатором «карта», например:

    <div id="map" style="width:100%; height:100%"></div>
    

    Конечно, div можно стилизовать с помощью css, и обратите внимание, что информационные окна маркеров также могут быть стилизованы: в css используется h3.marker-title для стилизации заголовка информационного окна и стилизации div.marker-desc содержимого.

    Обратите внимание, что центр карты рассчитывается автоматически, и если вы хотите изменить масштаб по умолчанию, вам нужно поместить настраиваемое поле «map_zoom» на страницу, назначенную шаблону страницы карты.

    Надеюсь, поможет.

    • 0

Оставить ответ

You must login to add an answer.