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事件并在用户拖动它们时重置边界内的位置（请参阅https://stackoverflow.com/a/9103195/3452708）。< / p>

我更新了小提琴，告诉你如何：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 Map上不起作用

3 个答案: