fitBounds无效；setCenter是否

debugcn 发表于 Dev

埃里克

当我通过坐标添加标记时，使用fitBounds（）不会有任何问题，但是当我使用地址的地理编码时，fitBounds（）会将地图聚焦在海洋上。

但是，如果我将相同的坐标与setCenter（）一起使用，则可以使用。问题在于，这仅适用于一点。

这是我的代码：

function createMarkerFromAddress(address, labelOptions, infoWindowOptions) {
    //Create Label Options
    labelOptions = $.extend({}, labelOptionDefaults, labelOptions);

    //Create Info Window Options
    infoWindowOptions = $.extend({}, infoWindowDefaults, infoWindowOptions);

    //Create Geocoder
    var geocoder = new google.maps.Geocoder();

    //Geocode Address & Add to Map
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            var marker = new MarkerWithLabel({
                position: results[0].geometry.location,
                draggable: false,
                map: map,
                icon: markerIcon,
                labelContent: labelOptions.content,
                labelAnchor: labelOptions.anchor,
                labelClass: labelOptions.className,
                animation: google.maps.Animation.DROP
            });

            //Add click event for InfoWindow
            google.maps.event.addListener(marker, 'click', (function (marker) {
                return function () {
                    //Load proper information for clicked campus
                    infoWindow.setContent(infoWindowOptions.content);

                    //Open Info Window
                    infoWindow.open(map, marker);
                }
            })(marker));

            //Extend bounds
            bounds.extend(
                new google.maps.LatLng(
                    results[0].geometry.location.lat(),
                    results[0].geometry.location.lng())
            );

            map.setCenter(
                new google.maps.LatLng(
                    results[0].geometry.location.lat(),
                    results[0].geometry.location.lng()));
        } else {
            console.log('Geocode was not successful for the following reason: ' + status);
        }
    });

这几乎与我的createMarkerFromCoordinates方法相同，除了它具有geocode（）调用以从指定地址获取坐标。

地理编码

由于地址解析器是异步的，因此map.fitBounds每次更新边界时都需要调用。

代码段：

var geocoder;
var map;
var labelOptionDefaults;
var infoWindowDefaults;
var bounds = new google.maps.LatLngBounds();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  createMarkerFromAddress("New York, NY", {}, {});
  createMarkerFromAddress("Newark, NJ", {}, {});
  createMarkerFromAddress("Baltimore, MD", {}, {});

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


function createMarkerFromAddress(address, labelOptions, infoWindowOptions) {
  //Create Label Options
  labelOptions = $.extend({}, labelOptionDefaults, labelOptions);

  //Create Info Window Options
  infoWindowOptions = $.extend({}, infoWindowDefaults, infoWindowOptions);

  //Create Geocoder
  var geocoder = new google.maps.Geocoder();

  //Geocode Address & Add to Map
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      var marker = new MarkerWithLabel({
        position: results[0].geometry.location,
        draggable: false,
        map: map,
        animation: google.maps.Animation.DROP
      });

      //Add click event for InfoWindow
      google.maps.event.addListener(marker, 'click', (function(marker) {
        return function() {
          //Load proper information for clicked campus
          infoWindow.setContent(infoWindowOptions.content);

          //Open Info Window
          infoWindow.open(map, marker);
        }
      })(marker));

      //Extend bounds
      bounds.extend(
        new google.maps.LatLng(
          results[0].geometry.location.lat(),
          results[0].geometry.location.lng())
      );
      map.fitBounds(bounds);
    } else {
      console.log('Geocode was not successful for the following reason: ' + status);
    }
  });
}

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>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。