设置缩放级别在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地图上不起作用

回答

相关问题