Google地图会从外部地图链接到标记

时间:2014-11-11 13:29:27

标签: javascript wordpress google-maps google-maps-api-3 marker

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

您可以通过查看此页面上的来源查看我的代码的实例:

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

我使用Wordpress的高级自定义字段插件来生成地图及其标记。我正在使用他们docs pages上提供的示例代码,但我尝试添加其他功能。我只是需要一些建议,我把这段代码放在哪里,以使我的链接列表与地图上的每个标记相关:

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>

作为参考,我在此处粘贴了完整的Google地图代码:

<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; ?>

任何人都可以建议或给我一些帮助我如何才能使这个工作?

1 个答案:

答案 0 :(得分:0)

js使用你的代码小提琴:

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

需要注意的几点:

  1. 将div listdata留空
  2. 链接的插入div,你可能需要修改它(参见下面的代码我在jquery旁边留下了一条注释,将你的链接附加到listdata div中 - 我添加了一个css类,只是为了jsfiddle来设置样式但是你可以删除这个......
  3. 用以下替换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);