設置縮放級別在Google地圖上不起作用

我正在學習網絡開發，並使用JavaScript顯示Google地圖。這裏是我的代碼：設置縮放級別在Google地圖上不起作用

<!DOCTYPE html> 
<html> 
<head> 
    <title>Google Map</title> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     function loadData(callback) { 
      var xobj = new XMLHttpRequest(); 
      xobj.overrideMimeType("application/json"); 
      xobj.onreadystatechange = function() { 
       if (xobj.readyState == 4 && xobj.status == "200") 
        callback(xobj.responseText); 
      } 
      xobj.open("GET", "data.json", true); 
      xobj.send(null); 
     } 

     window.onload = function() { 
      loadData(function(response) { 
       markers = JSON.parse(response); 

      var mapOptions = { 
       center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
       zoom: 2, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var infoWindow = new google.maps.InfoWindow(); 
      var latlngbounds = new google.maps.LatLngBounds(); 
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

      for (var i = 0; i < markers.length; i++) { 
       var data = markers[i] 
       var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
       var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title: data.title 
       }); 
       (function (marker, data) { 
        google.maps.event.addListener(marker, "click", function (e) { 
         infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.title + "</div>"); 
         infoWindow.open(map, marker); 
        }); 
       })(marker, data); 
       latlngbounds.extend(marker.position); 
      } 
      var bounds = new google.maps.LatLngBounds(); 
      map.setCenter(latlngbounds.getCenter()); 
      map.fitBounds(latlngbounds); 
      }); 
     } 
    </script> 
    <style> 
    /* style settings for Google map */ 
    #map-canvas { 
     width : 1200px; /* map width */ 
     height: 600px; /* map height */ 
    } 
    </style> 
</head> 
<body> 
    <!-- Dislay Google map here --> 
    <div id='map-canvas' ></div> 
</body> 
</html>

我想改變縮放級別，但它不起作用。我試圖設置，例如，6或8但它不會改變。可能是什麼原因？

來源

2015-04-26 smartmouse

.fitBounds方法將重置視口，因此不考慮您的縮放級別。這是一個最小的工作示例：https://jsfiddle.net/pdnsown1/1/。

如果您對包含.fitBounds調用的行進行註釋並更改縮放級別，則會看到它實際上已應用。但是，如果您不註釋該行，則不會考慮縮放級別。

（見https://developers.google.com/maps/documentation/javascript/reference#Map）

編輯：地圖位置限制在指定的界限，你要聽drag事件，每當用戶拖動它們的外邊界內復位位置（見https://stackoverflow.com/a/9103195/3452708）。

我更新了小提琴，告訴你如何：https://jsfiddle.net/pdnsown1/2/。

來源

2015-04-26 09:41:08 matteodelabre

我試過這個，爲我工作。

map.fitBounds(bounds)

var listener = google.maps.event.addListener(map, "idle", function() { map.setZoom(16); google.maps.event.removeListener(listener); });

來源

2018-03-01 09:48:33

我結束了這樣的代碼之後添加以下代碼。使用jqueryuimap：

$("#map_canvas_spot_detail").gmap("addMarker", { 
    position: new google.maps.LatLng(LAT, LON) 
    }); 
    $("#map_canvas_spot_detail").gmap("option", "center", new google.maps.LatLng(LAT, LON)); 
    return $("#map_canvas_spot_detail").gmap("option", "zoom", 15);

來源

2018-03-06 13:59:27 andi

設置縮放級別在Google地圖上不起作用

回答

相關問題