设置缩放级别不适用于 Google 地图

Question

我正在学习网络开发，我正在使用 JavaScript 来显示 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 但它没有改变。可能是什么原因？

Answer 1

.fitBounds 方法会重置视口，因此不会考虑您的缩放级别。这是一个最小的工作示例：https://jsfiddle.net/pdnsown1/1/.

如果您注释包含对 .fitBounds 的调用的行并更改缩放级别，您将看到它实际应用。但是，如果您不对该行进行注释，则不会考虑缩放级别。

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

编辑：要将地图位置限制在给定范围内，您必须监听 drag 事件并在用户拖动到范围之外时重置范围内的位置（参见） .

我更新了 fiddle 以向您展示如何：https://jsfiddle.net/pdnsown1/2/。

Answer 2

我试过这个，对我有用。

在map.fitBounds(bounds)

之后添加此代码

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

Answer 3

我最终得到了这样的代码。使用 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);

设置缩放级别不适用于 Google 地图

Setting zoom level doesn't work on Google Map

javascript

html

google-maps

zooming