Google지도에서 확대 / 축소 수준을 설정하는 방법
다음은 위도와 경도를 제공하여 Google지도에 마커를 추가하기 위해 작성한 코드입니다. 문제는 매우 확대 된 Google지도를 얻는다는 것입니다. 확대 / 축소 수준을 1로 설정하려고 시도했지만 매우 확대 된지도에는 영향을 미치지 않습니다.
<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>
이 경우 확대 / 축소 수준을 어떻게 낮출 수 있습니까?
아래 코드는 지정된 경계에 맞게지도를 확대하고 있습니다.
addMarker(27.703402,85.311668,'New Road');
center = bounds.getCenter();
map.fitBounds(bounds);
마커가 하나만 있고 경계에 추가하면 가능한 가장 가까운 확대 / 축소가됩니다.
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
}
지도에 "추가"한 (또는 경계를 확장 한) 마커의 수를 추적하는 경우 해당 숫자가 1보다 큰 경우에만 fitBounds를 호출 할 수 있습니다. 일반적으로 마커를 배열에 넣고 (나중에 사용하기 위해) 해당 배열의 길이를 테스트합니다.
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);
}
map.setZoom(zoom:number)
https://developers.google.com/maps/documentation/javascript/reference#Map
What you're looking for are the scales for each zoom level. The numbers are in metres. Use these:
20 : 1128.497220
19 : 2256.994440
18 : 4513.988880
17 : 9027.977761
16 : 18055.955520
15 : 36111.911040
14 : 72223.822090
13 : 144447.644200
12 : 288895.288400
11 : 577790.576700
10 : 1155581.153000
9 : 2311162.307000
8 : 4622324.614000
7 : 9244649.227000
6 : 18489298.450000
5 : 36978596.910000
4 : 73957193.820000
3 : 147914387.600000
2 : 295828775.300000
1 : 591657550.500000
For zooming your map two level then just add this small code of line map.setZoom(map.getZoom() + 2);
Here is a function I use:
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(52.2, 5),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 7
});
function zoomTo(level) {
google.maps.event.addListener(map, 'zoom_changed', function () {
zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function (event) {
if (this.getZoom() > level && this.initialZoom == true) {
this.setZoom(level);
this.initialZoom = false;
}
google.maps.event.removeListener(zoomChangeBoundsListener);
});
});
}
These methods worked for me, it maybe useful for anyone: MapOptions interface
set min zoom: mMap.setMinZoomPreference(N);
set max zoom: mMap.setMaxZoomPreference(N);
where N can equal to:
20 : 1128.497220
19 : 2256.994440
18 : 4513.988880
17 : 9027.977761
16 : 18055.955520
15 : 36111.911040
14 : 72223.822090
13 : 144447.644200
12 : 288895.288400
11 : 577790.576700
10 : 1155581.153000
9 : 2311162.307000
8 : 4622324.614000
7 : 9244649.227000
6 : 18489298.450000
5 : 36978596.910000
4 : 73957193.820000
3 : 147914387.600000
2 : 295828775.300000
1 : 591657550.500000
참고URL : https://stackoverflow.com/questions/11454229/how-to-set-zoom-level-in-google-map
'programing' 카테고리의 다른 글
| "루트 요소가 없습니다."수정 방법 (0) | 2020.12.03 |
|---|---|
| JSON 및 내 보내지 않은 필드 처리 (0) | 2020.12.03 |
| Chrome 확장 프로그램 내에서 onClick이 작동하지 않음 (0) | 2020.12.03 |
| Android에 레이아웃을 프로그래밍 방식으로 포함하려면 어떻게해야합니까? (0) | 2020.12.03 |
| Amazon RDS (postgres) 연결 제한? (0) | 2020.12.03 |