Javascript 设置缩放级别不需要'；我不能在谷歌地图上工作_Javascript_Html_Google Maps_Zooming

Javascript 设置缩放级别不需要'；我不能在谷歌地图上工作

javascript html google-maps

Javascript 设置缩放级别不需要'；我不能在谷歌地图上工作,javascript,html,google-maps,zooming,Javascript,Html,Google Maps,Zooming,我正在学习网络开发，我正在使用JavaScript显示谷歌地图。这是我的密码： <!DOCTYPE html> <html> <head> <title>Google Map</title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> &

我正在学习网络开发，我正在使用JavaScript显示谷歌地图。这是我的密码：

<!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>


谷歌地图
函数loadData（回调）{
var xobj=新的XMLHttpRequest（）；
重写emimetype（“application/json”）；
xobj.onreadystatechange=函数（）{
if（xobj.readyState==4&&xobj.status==200）
回调（xobj.responseText）；
}
open（“GET”，“data.json”，true）；
xobj.send（空）；
}
window.onload=函数（）{
loadData（功能（响应）{
markers=JSON.parse（响应）；
变量映射选项={
中心：新建google.maps.LatLng（标记[0].lat，标记[0].lng），
缩放：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（“地图画布”），mapOptions）；
对于（var i=0；i


我正在尝试更改缩放级别，但不起作用。例如，我试图设置6
或8
，但没有改变。原因可能是什么？
使用.fitBounds
方法重置视口，因此不考虑缩放级别。下面是一个简单的工作示例：
如果您对包含调用.fitBounds
的行进行注释并更改缩放级别，您将看到它实际上已应用。但是，如果未注释该行，则不会考虑缩放级别
（见附件）
编辑：要将地图位置限制在给定的边界内，您必须收听拖动
事件，并在用户拖动到边界外时重置边界内的位置（请参阅）
我更新了小提琴，向您展示了如何使用：。
我尝试了这把小提琴，并为我工作
在map.fitBounds（bounds）

var listener=google.maps.event.addListener（映射，“空闲”，函数（）{
map.setZoom（16）；
google.maps.event.RemovelListener（监听器）；
});
我最终得到了这样的代码。使用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);

谢谢，先生。似乎我们必须等到映射完成fitBounds（）方法的执行。如果谷歌能为需要时间才能完成的方法提供一个promise api，那就太好了……这里有一个关于事件的官方文档链接