Google地图重置为初始状态

Google地图重置为初始状态

关注
发信
关注(28)粉丝(399)

Google地图重置为初始状态

本文介绍了Google地图重置为初始状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图找出如何添加重置为初始状态按钮。



我有一个带有用于几个商店位置的标记的Google地图。



这是我使用的代码：


I'm trying to find out how to add a "reset to initial state"-button.

I have a Google Map with markers for a few shop locations.

This is the code I use:

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

Now I want to add a button anywhere outside or inside the map only to have the option to reset the zoom and center to the initial state.

Any points in the right direction would be awesome.

Thanks!

解决方案

To reset the map to its initial state, do the same thing you do when you initialize your map. You don't need to redo everything, you can save the computed initial bounds in a global variable (as well as the map), then call map.fitBounds(bounds); when your reset button is clicked.

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

proof of concept fiddle

code snippet:

(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);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<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>

这篇关于Google地图重置为初始状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-12 20:13
Powered by LMLPHP ©2024 Google地图重置为初始状态 0.043561