Google지도 v3를 특정 지역으로 제한 할 수 있습니까? 일부 영역 (예 : 국가) 만 표시하고 사용자가 다른 곳으로 슬라이드하는 것을 허용하고 싶습니다. 또한 확대 / 축소 수준을 제한하고 싶습니다. 예를 들어 수준 6과 9 사이에서만 가능합니다. 그리고 모든 기본지도 유형을 사용하고 싶습니다.
이것을 달성하는 방법이 있습니까?
StyledMap을 사용하여 확대 / 축소 수준을 제한하는 데 부분적인 성공을 거두었지만 ROADMAP 제한만으로 성공했으며 다른 기본 유형에 대한 확대 / 축소를 이런 방식으로 제한 할 수 없었습니다.
도움을 주셔서 감사합니다
답변
dragend
이벤트를 수신 할 수 있으며 지도가 허용 된 경계를 벗어나면 다시 안으로 이동합니다. LatLngBounds
개체 에서 허용 된 경계를 정의한 다음 contains()
메서드를 사용 하여 새 위도 / 경도 중심이 경계 내에 있는지 확인할 수 있습니다.
확대 / 축소 수준을 매우 쉽게 제한 할 수도 있습니다.
다음 예를 고려하십시오. Fiddle Demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Limit Panning and Zoom</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
// This is the minimum zoom level that we'll allow
var minZoomLevel = 5;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Bounds for North America
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(28.70, -127.50),
new google.maps.LatLng(48.85, -55.90)
);
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function() {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function() {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
</script>
</body>
</html>
위 예의 스크린 샷. 이 경우 사용자는 남쪽 또는 극동으로 더 이상 드래그 할 수 없습니다.
답변
확대 / 축소 수준을 제한하는 더 좋은 방법 은 이벤트에 반응하는 대신 minZoom
/ maxZoom
옵션 을 사용하는 것입니다.
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
또는 맵 초기화 중에 옵션을 지정할 수 있습니다. 예 :
var map = new google.maps.Map(document.getElementById('map-canvas'), opt);
답변
좋은 소식. 2019 년 2 월 14 일에 출시 된 Maps JavaScript API 버전 3.35부터 새 restriction
옵션을 사용 하여지도의 뷰포트를 제한 할 수 있습니다 .
문서에 따르면
MapRestriction 인터페이스
지도에 적용 할 수있는 제한입니다. 지도의 뷰포트는 이러한 제한을 초과하지 않습니다.
출처 : https://developers.google.com/maps/documentation/javascript/reference/map#MapRestriction
이제지도 초기화 중에 제한 옵션을 추가하면됩니다. 뷰포트를 스위스로 제한하는 다음 예제를 살펴보십시오.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 46.818188, lng: 8.227512},
minZoom: 7,
maxZoom: 14,
zoom: 7,
restriction: {
latLngBounds: {
east: 10.49234,
north: 47.808455,
south: 45.81792,
west: 5.95608
},
strictBounds: true
},
});
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" async defer></script>
이게 도움이 되길 바란다!
답변
v.3 +에서 확대 / 축소를 제한하려면. 지도 설정에서 기본 확대 / 축소 수준을 추가하고 minZoom 또는 maxZoom (또는 필요한 경우 둘 다) 확대 / 축소 수준은 0 ~ 19입니다. 제한이 필요한 경우 청각 장애인 확대 / 축소 수준을 선언해야합니다. 모두 대소 문자를 구분합니다!
function initialize() {
var mapOptions = {
maxZoom:17,
minZoom:15,
zoom:15,
....
답변
범위를 제한하는 훨씬 더 좋은 방법은 포스터 위의 포함 논리를 사용했습니다.
var dragStartCenter;
google.maps.event.addListener(map, 'dragstart', function(){
dragStartCenter = map.getCenter();
});
google.maps.event.addListener(this.googleMap, 'dragend', function(){
if (mapBounds.contains(map.getCenter())) return;
map.setCenter(this.dragStart);
});
답변
이는지도를 특정 위치로 다시 중심을 맞추는 데 사용할 수 있습니다. 내가 필요했던 것입니다.
var MapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(35.676263, 13.949096),
new google.maps.LatLng(36.204391, 14.89038));
google.maps.event.addListener(GoogleMap, 'dragend', function ()
{
if (MapBounds.contains(GoogleMap.getCenter()))
{
return;
}
else
{
GoogleMap.setCenter(new google.maps.LatLng(35.920242, 14.428825));
}
});
답변
myOptions = {
center: myLatlng,
minZoom: 6,
maxZoom: 9,
styles: customStyles,
mapTypeId: google.maps.MapTypeId.ROADMAP
};