如何在加载时触发第一个信息窗口？

Question

关于这个问题我已经搜索了很多。我似乎无法解决这个问题。更具体地说，我没有看到特定于 acf 的解决方案。而且我不想重写所有的 js 来让它工作:)

我想在页面加载时触发我的中继器字段的第一个标记的信息窗口。

这是我的 js 代码，我从 acf doc 中获取并适应了我的需要：

    <script>
      (function($) {
        function render_map( $el ) {

          var $markers = $el.find('.marker');

          var styles = [
            {
              "featureType": "road",
              "stylers": [
                { "visibility": "simplified" },
              ]
            },{
              "featureType": "poi",
              "stylers": [
                { "visibility": "off" }
              ]
            },{
              "featureType": "landscape.natural.terrain",
              "stylers": [
                { "visibility": "off" }
              ]
            }
          ];

          var args = {
            zoom        : 16,
            center      : new google.maps.LatLng(0, 0),
            mapTypeId   : google.maps.MapTypeId.ROADMAP,
            zoomControl: true,
            zoomControlOptions: {
              style: google.maps.ZoomControlStyle.SMALL,
              position: google.maps.ControlPosition.RIGHT_BOTTOM
            },
            panControl: false,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            scrollwheel: false,
            mapTypeControlOptions: {
              mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
            }
          };

          // create map
          var map = new google.maps.Map( $el[0], args);
          var mapType = new google.maps.StyledMapType(styles, { name:"Grayscale" });
          map.mapTypes.set('tehgrayz', mapType);
          map.setMapTypeId('tehgrayz');

          // add a markers reference
          map.markers = [];

          // add markers
          $markers.each(function(){
              add_marker( $(this), map );
          });

          // center map
          center_map( map );
        }

        /*
        *  add_marker
        */
        function add_marker( $marker, map ) {
          // var
          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: '<?php bloginfo('template_url'); ?>/img/marker.svg'
          });

          // 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
        */
        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 );
          }
        }

        /*
        *  This function will render each map when the document is ready (page has loaded)
        */
        $(document).ready(function(){
          $('.acf-map').each(function(){
            render_map( $(this) );
          });
        });
      })(jQuery);
    </script>

这是我的 php 循环遍历收割机元素的代码：

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

我有点迷茫:/

在此先感谢您的帮助。

Answer 1

传递给 $.each 回调的第一个参数是集合中元素的索引。检查索引是否为 0，当它出现时，触发 click:

      $markers.each(function(index){ 
          add_marker( $(this), map );
          if(!index){
             google.maps.event.trigger(map.markers[0],'click');
          }
      });

如何在加载时触发第一个信息窗口？

How do I trigger the first infowindow on load?

wordpress

google-maps

google-maps-api-3

advanced-custom-fields