映射API 3复位界

Question

在扩展后重新设置边界时有问题。也就是说，用户搜索地图时，地图会缩放以适应标记。这很好，只要映射是扩展的(即bounds.extend)，但是如果用户将较小的半径放进去，映射就会保持不变。这是预期的，因为它仍然符合fitBounds方法检查的界限。然而，显然出于审美目的，当存在较小的标记半径时，它应该缩小。

我尝试了几种选择，见以下问题：

• Reset bounds on Google Maps API v3
• Reset Bounds on Google Map v3 API
• Google Maps API V3 fitbounds() zooms out but never in

第三个问题有一些很好的答案，其中大多数(在我编程生涯中的第一次)是我在诉诸堆栈溢出搜索之前就已经解决了。不幸的是，他们都没有发挥作用。

我在不同的地方尝试过不同的东西：

bounds = null;
delete bounds;
bounds = new google.maps.LatLngBounds(null);

在调用map.setZoom(20)之前，也尝试过调用fitBounds (20)来强制其缩小，但这也无济于事。这告诉我，它一定与边界变量有关，而不是以某种方式被清空。

在这种情况下，我可能是在错误的位置循环，或者在错误的点将边界设置为null，或者在错误的范围内设置边界变量等等。

我也尝试过在浏览器上的控制台中调试一些东西，但这并没有帮助我。

代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyC04mFN3hiFMiZyyYb6TZNMW4ucUtKF5wE&libraries=places&region=GB"></script>

<script type="text/javascript">
  var geocoder;
  var map;
  var search_coordinates;
  var markers = [];
  var bounds = new google.maps.LatLngBounds();

  $('#matching_results').hide();

  function initialize() {
    var center = new google.maps.LatLng(51.508515,-0.125487)


    var input = document.getElementById('location');
    var autocomplete = new google.maps.places.Autocomplete(input, options);
    var options = {
    types: [],
    componentRestrictions: {country: 'uk'}
  };

    var mapOptions = {
    zoom:13,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    geocoder = new google.maps.Geocoder();



    function customMarker(category_id) {
      switch (category_id) {
        case 1:
        return "<%= image_path("marker_icons/hotel.png") %>";
        case 2:
        return "<%= image_path("marker_icons/meeting.png") %>";
        case 3:
        return "<%= image_path("marker_icons/bar_restaurant.png") %>";
        case 4:
        return "<%= image_path("marker_icons/healthclub.png") %>";
        case 5:
        return "<%= image_path("marker_icons/academic.png") %>";
        case 6:
        return "<%= image_path("marker_icons/civic.png") %>";
        case 7:
        return "<%= image_path("marker_icons/cinema_theatre.png") %>";
        case 8:
        return "<%= image_path("marker_icons/historic.png") %>";
        case 9:
        return "<%= image_path("marker_icons/gallery.png") %>";
        case 10:
        return "<%= image_path("marker_icons/theme_park.png") %>";
        break;
        default:
      }
    }

    function addMarker(location) {
       var point = new google.maps.LatLng(location.latitude, location.longitude);
       var marker = new google.maps.Marker({
                  position: point,
                  map: map,
                  title: name,
                  icon: customMarker(location.venue_category_id)
                });
       markers.push(marker);
       bound = new google.maps.LatLngBounds(null);

        for(var i in markers)
              {
                bounds.extend(markers[i].getPosition());
                map.fitBounds(bounds);
              }

     }



     function removeMarker(marker) {
       marker.setMap(null);
     }




    function codeAddress() {
      var address = document.getElementById('location').value;
      geocoder.geocode( { 'address': address+" UK"}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          search_coordinates = results[0].geometry.location;

          $('#longitude').val(search_coordinates.lng());
          $('#latitude').val(search_coordinates.lat());

          fetchResults($('#search_form').serialize())

          map.setCenter(results[0].geometry.location);



          // var marker = new google.maps.Marker({
          //                            map: map,
          //                            position: results[0].geometry.location
          //                        });
        } else {
          // alert('Geocode was not successful for the following reason: ' + status);
          alert('Please add a valid town or postcode.')
        }
      });
    }



    // Does the initial search if that one is coming from the home page
    var search_location = $('#location').val();
    if ( search_location != '') {
          codeAddress();
    }

    function fetchResults(params) {
      $.getJSON( "/venues/search.json", params)
      .done(function( data ) {

        // Remove old Markers
        $.each(markers, function(key, val) {
          removeMarker(val);
        });
          // Add new markers
        var venue_ids = [];
        $.each(data, function(key, val) {
            addMarker(val);
            venue_ids.push(val.id);
          });

          // fit map to markers


          // Change results text
          $('#matching_empty').hide();
          $('#matching_results').show();
          $('#results_counter').text(data.length);


          $('#enquiry_venue_ids_string').val("[" + venue_ids + "]");
          console.log(data);
          // gon.venues defines venues, is an array of objects straight from db

          $( "#venue_names" ).empty();
          $( "#venue_names" ).append("<div id='continued' style='height:620px; overflow:scroll;'></div>")


          $.each(data, function(key, venue) {

            if (venue.venue_images[0]) {

              $("#continued").append("<div class='row' style='padding-top:10px;'><div class='col-md-12'><a href='http://www.wefindvenues.com/browse/" + (venue.id) + "' target='_blank' class='h5'>" + (venue.name) + "</a></div><div class='col-md-12'>" + (venue.address) + "<br /><strong>Max Capacity </strong>" + (venue.max_capacity) + "</div><div class='col-md-12'><img src='" + (venue.venue_images[0].url).replace(/'/g, "%27") + "' class='img-responsive'></div></div>");

            console.log(venue.venue_images[0].url)

          };


          });



      })
      .fail(function( jqxhr, textStatus, error ) {
        var err = textStatus + ', ' + error;
        console.log( "Request Failed: " + err);
      });
    }

    $('#search_form').submit(function() {
      codeAddress();
      return false;
    })

  }


  google.maps.event.addDomListener(window, 'load', initialize);

</script>

为任何帮手干杯

Answer 1

这部分代码存在一些问题：

    for(var i in markers)
          {
            bounds.extend(markers[i].getPosition());
            map.fitBounds(bounds);
          }

map.fitBounds(bounds);最好是在for循环之后调用；另外，它是为所有标记调用的:已删除的标记和新的标记。markers数组是较新的空出。从地图中移除标记：

        $.each(markers, function(key, val) {
          removeMarker(val);
        });

但从来没有从markers数组。您可以添加一行：

       markers = [];