谷歌地图链接到外部地图的标记

我正在尝试制作一个链接列表，与谷歌地图上的正确标记相关联。我有多个标记，这就是我所拥有的：

通过查看此页面上的源代码，您可以看到我的代码的实时示例：

http://79.170.40.181/cranes.co.uk/stockists/

我正在使用Wordpress的高级自定义字段插件来生成地图及其标记。我正在使用他们文档页面上给出的示例代码，但我正在尝试添加其他功能。我只需要一些关于我把这段代码放在哪里的建议，以使我的链接列表与地图上的每个标记相关：

var name = $('#listdata').find('.clickaway');
google.maps.event.addDomListener(name, 'click', function() {
    infowindow.open(map,marker);
    alert('found me');
});

我的链接列表的结构为：

<ul id="listdata"
   <li><a href="#" class="clickaway">Location 1</a></li>
   <li><a href="#" class="clickaway">Location 2</a></li>
   ...
</ul>

为了参考，我在这里粘贴了我的完整谷歌地图代码：

<script type="text/javascript">    
/* Google Maps */
(function($) {
/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $el (jQuery element)
*  @return  n/a
*/
function render_map( $el ) {
    // var
    var $markers = $el.find('.marker');
    // vars
    var args = {
        zoom        : 16,
        center      : new google.maps.LatLng(0, 0),
        mapTypeId   : google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP]
        }
    };
    // create map               
    var map = new google.maps.Map( $el[0], args);
    // add a markers reference
    map.markers = [];
    // add markers
    $markers.each(function(){
        add_marker( $(this), map );
    });
    // center map
    center_map( map );
}
/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $marker (jQuery element)
*  @param   map (Google Map object)
*  @return  n/a
*/
function add_marker( $marker, map ) {
    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    var image = 'http://79.170.40.181/cranes.co.uk/wp-content/uploads/2014/10/pin.png';
    // 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, 'click', function() {
            infowindow.open( map, marker );
        });
    }
}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   map (Google Map object)
*  @return  n/a
*/
function center_map( map ) {
    // vars
    var bounds = new google.maps.LatLngBounds();
    // loop through all markers and create bounds
    $.each( map.markers, function( i, marker ){
        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
        bounds.extend( latlng );
    });
    // only 1 marker?
    if( map.markers.length == 1 )
    {
        // set center of map
        map.setCenter( bounds.getCenter() );
        map.setZoom( 16 );
    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );
    }
}
// Call it
$(document).ready(function(){
    $('.acf-map').each(function(){
        render_map( $(this) );
    });
});
})(jQuery);
</script>

以下是我如何循环浏览和显示标记：

 <?php if( have_rows('locations') ): ?>
            <div class="acf-map">
            <?php while ( have_rows('locations') ) : the_row(); 
                $location = get_sub_field('stockist_location'); ?>
                <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo   $location['lng']; ?>">
                                <h4 class="title">Title</h4>
                                        <p class="address">Address</p>
                </div>
            <?php endwhile; ?>
            </div>
    <?php endif; ?>

有人能为我提供建议或帮助吗？

js使用您的代码：

http://jsfiddle.net/dheffernan/3xkuybrf/

需要注意的几点：

将div listdata保留为空
为链接插入的div，您可能需要修改它（请参阅下面的代码，我在jquery旁边留下了一个注释，将您的链接附加到listdatadiv中-我添加了一个css类，只是为了让jsfiddle对其进行样式设置，但您可以删除它

将js替换为以下内容。

    /* Google Maps */
(function($) {
    function render_map( $el ) {
        // var
        var $markers = $(document).find('.marker');

        // vars
        var args = {
            zoom        : 16,
            center      : new google.maps.LatLng(0, 0),
            mapTypeId   : google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            mapTypeControlOptions: {
              mapTypeIds: [google.maps.MapTypeId.ROADMAP]
            }
        };
        // create map               
        var map = new google.maps.Map( $el[0], args);
        // add a markers reference
        map.markers = [];
        // add markers
        index=0;
        $markers.each(function(){
            add_marker( $(this), map, index);
            index++;
        });
        // center map
        center_map( map );
        }
    function add_marker( $marker, map, index ) {
        // var
        var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
        var image = 'http://79.170.40.181/cranes.co.uk/wp-content/uploads/2014/10/pin.png';
        // 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() )
        {
            $('#listdata').append('<div class= "linkage" id="p'+index+'">'+$marker.html()+'</div>'); // change html here if you want but eave id intact!!
            $(document).on('click', '#p'+index, function(){
                infowindow.open(map, marker);
                setTimeout(function () { infowindow.close(); }, 5000);
            });
            // create info window
            var infowindow = new google.maps.InfoWindow({
                content     : $marker.html(),
            });


            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open( map, marker );
            });
        }
        }

    function center_map( map ) {
        // vars
        var bounds = new google.maps.LatLngBounds();
        // loop through all markers and create bounds
        $.each( map.markers, function( i, marker ){
            var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
            bounds.extend( latlng );
        });
        // only 1 marker?
        if( map.markers.length == 1 )
        {
            // set center of map
            alert(bounds);
            map.setCenter( bounds.getCenter() );
            map.setZoom( 16 );
        }
        else
        {
            // fit to bounds
            map.fitBounds( bounds );
        }
        }
    // Call it

      $(document).ready(function(){
        $('.acf-map').each(function(){
            render_map( $(this) );
        });
    });

})(jQuery);

相关内容

最新更新

热门标签：