>

현재 속성 맵을 만들기 위해 Google Maps API와 함께 작업하고 있습니다. 클릭 할 때 열리는 infoWindows로 마커를지도에 가져 오는 사용자 정의 게시물 유형을 통해 제어했습니다.

이제지도 아래에서 속성을 클릭하면지도 외부에서 속성을 클릭 할 때지도가 마커로 이동하고 정보창을 열 수 있도록지도 아래에 속성을 표시하는 일종의 방법을 구현해야합니다.

현재 전혀 작동하지 않습니다. 저는 매우 강력한 자바 스크립트 코더가 아니므로 도움을 주시면 감사하겠습니다.

현재지도 아래에 게시물 유형 항목 목록이 있지만 링크 할 방법이 없습니다 ..

지도에 대한 코드 스 니펫은 다음과 같습니다.

    /* MARKER 1 */
function add_marker( $marker, map ) {
    // var
    var image = 'http://www.masonyoung.co.uk/wp-content/uploads/2015/08/mason-new.png';
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    // create marker
    var marker = new google.maps.Marker
    ({
        position    : latlng,
        map         : map,
        icon: image
    });

    // add to array
    map.markers.push( marker );
    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html()
        });


        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'mouseover', function() {
            if($('.gm-style-iw').length) {
                $('.gm-style-iw').parent().hide();
            }

            infowindow.open( map, marker );

        });

            google.maps.event.addListener(marker, "mouseout", function() {
                marker.setAnimation(null);
            });


    }



}

이것은지도 아래에있는 속성 목록에 대해 지금까지 가지고있는 코드입니다.

   <?php 
$maps = get_posts( array(
    'post_type' => 'properties',
    'posts_per_page' => -1
    ) );?>
<?php foreach($maps as $map): ?>
    <?php
     $location = get_field('location',$map->ID);
     $price = get_field('price',$map->ID);
     $squareft = get_field('sq_ft_total',$map->ID);
     $buylet = get_field('to_buy_or_to_let',$map2->ID);
     $link = the_permalink($map->ID);
?>

<div id="map_list">
       <ul id="map-locations">
            <li data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
                <h3><a href="<?php echo post_permalink( $map ); ?>"><?php echo $location['address']; ?></a></h3>
            </li>
        </ul>

     </div>

<?php endforeach; ?>


  • 답변 # 1

    가장 쉬운 방법은 각 마커를 마커 배열에 추가하는 것입니다. 그런 다음 마커의 마커 색인에 대한 참조가 포함 된 각 마커에 대한 링크를 만듭니다. 이렇게하면 외부 링크를 클릭 할 때 마커 자체에서 클릭 이벤트를 트리거 할 수 있습니다.

    function initialize() {
        var markers = new Array();
        var mapOptions = {
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: new google.maps.LatLng(1, 1)
        };
        var locations = [
            [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
            [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
            [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
            [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],
            [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'],
            [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6']
        ];
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var infowindow = new google.maps.InfoWindow();
        for (var i = 0; i < locations.length; i++) {
            // Append a link to the markers DIV for each marker
            $('#markers').append('<a class="marker-link" data-markerid="' + i + '" href="#">' + locations[i][1] + '</a> ');
            var marker = new google.maps.Marker({
                position: locations[i][0],
                map: map,
                title: locations[i][1],
            });
            // Register a click event listener on the marker to display the corresponding infowindow content
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(locations[i][2]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
            // Add marker to markers array
            markers.push(marker);
        }
        // Trigger a click event on each marker when the corresponding marker link is clicked
        $('.marker-link').on('click', function () {
            google.maps.event.trigger(markers[$(this).data('markerid')], 'click');
        });
    }
    initialize();
    
    

    JSFiddle 데모

  • 이전 sql - coldfusion 질의 - 주입 보호
  • 다음 string - HTML 태그에서 이스케이프 문자를 변환하는 방법은 무엇입니까?