javascript - map API 3 重置边界

Question

在扩展边界后重置边界时遇到问题。即，用户搜索 map ， map 会缩小以适合标记。只要 map 在延伸(即bounds.extend)，这种方法就可以正常工作，但是如果用户输入较小的半径， map 就会保持不变。这是预期的，因为它仍然符合 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);

还尝试在调用 fitBounds 之前调用 map.setZoom(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 数组较新被清空。标记已从 map 上删除:

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

但绝不会来自markers数组。您可以添加一行:

       markers = [];