如何在谷歌地图中设置缩放级别 [英] How to set zoom level in google map

问题描述

这里是我写的代码，通过提供纬度和经度向谷歌地图添加一个标记。问题是我得到一个非常高度放大的谷歌地图。我曾尝试将缩放级别设置为1，但这对高度缩放的地图没有任何影响。

 < script src = http://maps.google.com/maps/api/js?v=3&sensor=falsetype =text / javascript>< / script> 
< script type =text / javascript> 
 var icon = new google.maps.MarkerImage（http://maps.google.com/mapfiles/ms/micons/blue.png，新的google.maps.Size（32,32），新的google .maps.Point（0，0），new google.maps.Point（16，32））; 
 var center = null; 
 var map = null; 
 var currentPopup; 
 var bounds = new google.maps.LatLngBounds（）; 
函数addMarker（lat，lng，info）{
 var pt = new google.maps.LatLng（lat，lng）; 
 bounds.extend（pt）; 
 var marker = new google.maps.Marker（{
 position：pt，
 icon：icon，
 map：map 
}）; 
 var popup = new google.maps.InfoWindow（{
 content：info，
 maxWidth：300 
}）; 
 google.maps.event.addListener（marker，click，function（）{
 if（currentPopup！= null）{
 currentPopup.close（）; 
 currentPopup = null; 
} 
 popup.open（map，marker）; 
 currentPopup = popup; 
}）; 
 google.maps.event.addListener（popup，closeclick，function（）{
 map.panTo（center）; 
 currentPopup = null; 
}）; 
} 
函数initMap（）{
 map = new google.maps.Map（document.getElementById（map），{
 center：new google.maps.LatLng（ 0，0），
 zoom：1，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 mapTypeControl：false，
 mapTypeControlOptions：{
 style：google。 maps.MapTypeControlStyle.HORIZONTAL_BAR 
}，
 navigationControl：true，
 navigationControlOptions：{
 style：google.maps.NavigationControlStyle.SMALL 
} 
}） ; 
 addMarker（27.703402,85.311668，'New Road'）; 
 center = bounds.getCenter（）; 
 map.fitBounds（bounds）; 
 
} 
< / script> 
< / head> 
< body onload =initMap（）style =margin：0px; border：0px; padding：0px;> 
< div id =map>< / div> 
< / body> 
< / html> 
  

如何降低这种情况下的缩放级别？

解决方案

下面的代码将缩放地图以适应指定的边界：

  addMarker（27.703402,85.311668，'New Road'）; 
 center = bounds.getCenter（）; 
 map.fitBounds（bounds）; 
  

如果您只有一个标记并将其添加到边界，则会导致最接近的缩放：

pre $函数addMarker（经纬度， LNG）;
bounds.extend（pt）;

$ / code>

如果您记录了您已添加到映射（或扩展边界），如果该数字大于1，则只能调用fitBounds。我通常会将标记推入数组中（以备后用）并测试该数组的长度。

如果您只有一个标记，请不要使用fitBounds 。使用标记位置和所需的缩放级别调用 setCenter ， setZoom 。

 函数addMarker（lat，lng，info）{
 var pt = new google.maps.LatLng（lat，lng）; 
 map.setCenter（pt）; 
 map.setZoom（您想要的缩放）; 
} 
  

Here is the code I have written to add a marker to the google map by providing latitude and longitude. The problem is that I get a very highly zoomed google map. I have tried setting the zoom level to 1 but this has no effect to the very highly zoomed map.

 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
     <script type="text/javascript">
        var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",new google.maps.Size(32, 32), new google.maps.Point(0, 0),new google.maps.Point(16, 32));
        var center = null;
        var map = null;
        var currentPopup;
        var bounds = new google.maps.LatLngBounds();
        function addMarker(lat, lng, info) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
                icon: icon,
                map: map
            });
            var popup = new google.maps.InfoWindow({
                content: info,
                maxWidth: 300
            });
            google.maps.event.addListener(marker, "click", function() {
                if (currentPopup != null) {
                    currentPopup.close();
                    currentPopup = null;
                }
                popup.open(map, marker);
                currentPopup = popup;
            });
            google.maps.event.addListener(popup, "closeclick", function() {
                map.panTo(center);
                currentPopup = null;
            });
        }
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(0, 0),
            zoom: 1,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            }
        });
        addMarker(27.703402,85.311668,'New Road');
        center = bounds.getCenter();
        map.fitBounds(bounds);

        }
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</body>
</html>

How can i decrease the level of zoom for this case?

解决方案

Your code below is zooming the map to fit the specified bounds:

addMarker(27.703402,85.311668,'New Road');
center = bounds.getCenter();
map.fitBounds(bounds);

If you only have 1 marker and add it to the bounds, that results in the closest zoom possible:

function addMarker(lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  bounds.extend(pt);
}

If you keep track of the number of markers you have "added" to the map (or extended the bounds with), you can only call fitBounds if that number is greater than one. I usually push the markers into an array (for later use) and test the length of that array.

If you will only ever have one marker, don't use fitBounds. Call setCenter, setZoom with the marker position and your desired zoom level.

function addMarker(lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  map.setCenter(pt);
  map.setZoom(your desired zoom);
}

这篇关于如何在谷歌地图中设置缩放级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！