谷歌地图重置为初始状态

Question

我正在尝试找出如何添加“重置为初始状态”按钮。

我有一个谷歌地图，上面有几个商店的标记。

这是我使用的代码：

<script type="text/javascript">
(function($) {

/**  new_map */

function new_map( $el ) {

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


// vars
// vars
var args = {
zoom: 15,
center: new google.maps.LatLng(0, 0),
mapTypeControl: false,
panControl: false,
scrollwheel: false,
streetViewControl:false,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL,
    position: google.maps.ControlPosition.RIGHT_CENTER
},
styles: [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}]};  

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


// return
return map;

}


// create info window outside of each - then tell that singular infowindow to swap content based on click
var infowindow = new google.maps.InfoWindow({
content   : ''
});


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


    // add to array
    map.markers.push( marker );



    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window



         liTag=$(".aflista ul").find("[data-lat='" + $marker.attr('data-lat') + "']");
         // console.log(liTag);
        // show info window when marker is clicked
        $(liTag).click(function() {
            infowindow.setContent($marker.html());
            infowindow.open(map, marker);
            map.setZoom(12);
            map.setCenter(marker.getPosition())
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent($marker.html());
            infowindow.open(map, marker);
            map.setZoom(12);
            map.setCenter(marker.getPosition())
        });

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

    }

}






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

}



/**  document ready */

// global var
var map = null;

$(document).ready(function(){

$('.acf-map').each(function(){

    // create map
    map = new_map( $(this) );

});

});

})(jQuery);

现在我想在地图外部或内部的任何地方添加一个按钮，只能选择重置缩放并居中到初始状态。

正确方向的任何一点都很棒。

谢谢！

Answer 1

要将地图重置为初始状态，请执行初始化地图时执行的操作。您不需要重做所有内容，您可以将计算出的初始bounds保存在全局变量（以及map）中，然后在重置按钮时调用map.fitBounds(bounds);点击。

$("#reset_state").click(function() {
  infowindow.close();
  map.fitBounds(bounds);
})

proof of concept fiddle

代码段

＆＃13;

＆＃13;

(function($) {
  /**  new_map */
  function new_map($el) {
      var $markers = $el.find('.marker');
      var args = {
        zoom: 15,
        center: new google.maps.LatLng(0, 0),
        mapTypeControl: false,
        panControl: false,
        scrollwheel: false,
        streetViewControl: false,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.SMALL,
          position: google.maps.ControlPosition.RIGHT_CENTER
        }
      };

      // create map               
      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);
      // return
      return map;
    }
    // create info window outside of each - then tell that singular infowindow to swap content based on click
  var infowindow = new google.maps.InfoWindow({
    content: ''
  });
  /**  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
      });
      // add to array
      map.markers.push(marker);
      // if marker contains HTML, add it to an infoWindow
      if ($marker.html()) {
        // create info window
        liTag = $(".aflista ul").find("[data-lat='" + $marker.attr('data-lat') + "']");
        // console.log(liTag);
        // show info window when marker is clicked
        $(liTag).click(function() {
          infowindow.setContent($marker.html());
          infowindow.open(map, marker);
          map.setZoom(12);
          map.setCenter(marker.getPosition())
        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent($marker.html());
          infowindow.open(map, marker);
          map.setZoom(12);
          map.setCenter(marker.getPosition())
        });
        // close info window when map is clicked
        google.maps.event.addListener(map, 'click', function(event) {
          if (infowindow) {
            infowindow.close();
          }
        });
      }
    }
    /**  center_map */

  function center_map(map) {
      // vars
      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);
      }
    }
    /**  document ready */
    // global var
  var map = null;
  var bounds = null;
  $(document).ready(function() {
    $('.acf-map').each(function() {
      // create map
      map = new_map($(this));
    });
    $("#reset_state").click(function() {
      infowindow.close();
      map.fitBounds(bounds);
    })
  });
})(jQuery);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" id="reset_state" value="reset" />
<div class="aflista">
  <ul>Markers
    <li data-lat='40.7127837'>New York, NY</li>
    <li data-lat='40.735657'>Newark, NJ</li>
  </ul>
</div>
<div class="acf-map" id="map_canvas">
  <div class="marker" data-lat="40.7127837" data-lng="-74.00594130000002" data-title="New York, NY">New York, NY</div>
  <div class="marker" data-lat="40.735657" data-lng="-74.1723667" data-title="Newark, NJ">Newark, NJ</div>
</div>

＆＃13;

＆＃13;

＆＃13;