當我更改默認縮放設置時，Google Maps JavaScript API不縮放

Question

縮放設置爲8，我正在使用KmlLayer作爲半徑。無論我如何將變焦設置更改爲縮放級別，在網站上都保持不變：http://mainelyknowleslobster.com/delivery/。

<script> 

    function initAutocomplete() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
     //center: {lat: 28.53687, lng: -81.38328}, 
     center: {lat: 28.5893244, lng: -81.3744571}, 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 


    //Add marker and popup info 
    var contentString = '<div id="content">'+ 
      '<div id="siteNotice">'+ 
      '</div>'+ 
      '<h4 id="firstHeading" class="firstHeading">MAINEly Knowles Lobster</h4>'+ 
      '<div id="bodyContent">'+ 
      '<p><center>887 Jackson Ave<br> Winter Park, FL 32789<br> Phone: <a href="tel:407-960-7441">407-960-7441</a><br> <a href="/contact/">Contact Us!</a></center></p>'+ 
      '</div>'+ 
      '</div>'; 


     var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
     }); 

     var marker = new google.maps.Marker({ 
     position: {lat: 28.5893244, lng: -81.3744571}, 
     map: map, 
     title: 'MAINEly Knowles Lobster' 
     }); 
     marker.addListener('click', function() { 
     infowindow.open(map, marker); 
     }); 

     // Create the search box and link it to the UI element. 
     var input = document.getElementById('pac-input'); 
     var searchBox = new google.maps.places.SearchBox(input); 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

     // Bias the SearchBox results towards current map's viewport. 
     map.addListener('bounds_changed', function() { 
     searchBox.setBounds(map.getBounds()); 
     }); 

     // Polygon 
     var ctaLayer = new google.maps.KmlLayer({ 
     url: 'http://mainelyknowleslobster.com/map/circle.kml', 
     map: map 
     }); 

     var markers = []; 
     // [START region_getplaces] 
     // Listen for the event fired when the user selects a prediction and retrieve 
     // more details for that place. 
     searchBox.addListener('places_changed', function() { 
     var places = searchBox.getPlaces(); 

     if (places.length == 0) { 
      return; 
     } 

     // Clear out the old markers. 
     markers.forEach(function(marker) { 
      marker.setMap(null); 
     }); 
     markers = []; 

     // For each place, get the icon, name and location. 
     var bounds = new google.maps.LatLngBounds(); 
     places.forEach(function(place) { 
      var icon = { 
      url: place.icon, 
      size: new google.maps.Size(71, 71), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(17, 34), 
      scaledSize: new google.maps.Size(25, 25) 
      }; 

      // Create a marker for each place. 
      markers.push(new google.maps.Marker({ 
      map: map, 
      icon: icon, 
      title: place.name, 
      position: place.geometry.location 
      })); 

      if (place.geometry.viewport) { 
      // Only geocodes have viewport. 
      bounds.union(place.geometry.viewport); 
      } else { 
      bounds.extend(place.geometry.location); 
      } 
     }); 
     map.fitBounds(bounds); 
     }); 
     // [END region_getplaces] 
    } 

    </script> 

我讀的地方，它可能有一些做與視的角度。我添加了preserveViewport屬性，但這並沒有解決問題。我不知道如果KML層有什麼關係呢：

directionsDisplay = new google.maps.DirectionsRenderer({ 
    preserveViewport: true 
    }); 

Answer 1

您需要設置preserveViewport: true爲按KmlLayer

// Polygon 
var ctaLayer = new google.maps.KmlLayer({ 
    url: 'http://mainelyknowleslobster.com/map/circle.kml', 
    preserveViewport: true, 
    map: map 
}); 

proof of concept fiddle

的