5
전적으로 Google지도를 처음 사용하고 있으며 내지도를 웹 사이트에 통합 할 수 있도록 첫 번째지도를 만들뿐입니다.Google지도 API 3 - 팬 /지도 제한 경계
사용자가 영국으로 이동할 수있는 영역을 제한하려고 시도하고 있으며 여기에서 여러 가지 게시물을 보았습니다. 모두 비슷한 답변을 제공하지만 코드를 사용할 수는 없습니다. 나를. This solution is the closest that I have got 그러나지도를 모두 이동하려고 시도 할 때마다 내 경계 지점 중 하나에 중심점이 있으며 다른 곳으로 이동할 수 없습니다.
나는 정말로 어리석은 실수를 저지른 경우가 있는데, 그럴 경우 사과를하지만, 잘못된 것을 해결할 수는 없습니다. 누구든지 아이디어가 있습니까?
감사합니다내 아래 코드는 (구글의 샘플 코드에서 가져온 후 추가에)있다 - 경계 관련된 부분은 영국의 경계를 설정부터 시작하여 아래쪽에 있습니다 :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false">
</script>
<?
//code to get long and lat from http://www.webmonkey.com/2010/02/get_started_with_google_geocoding_via_http
$apikey = MYKEY;
$geourl = "http://maps.google.com/maps/geo?q=LS255AA&output=csv&key=$apikey";
// Create cUrl object to grab XML content using $geourl
$c = curl_init();
curl_setopt($c, CURLOPT_URL, $geourl);
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
$csvContent = trim(curl_exec($c));
curl_close($c);
// Split pieces of data by the comma that separates them
list($httpcode, $elev, $lat, $long) = split(",", $csvContent);
?>
<script type="text/javascript">
var lat = "<?= $lat ?>";
var long = "<?= $long ?>";
</script>
<script type="text/javascript">
function initialize() {
//sets the long and lat of map
var myLatlng = new google.maps.LatLng(lat, long);
//options for the map
var myOptions = {
center: myLatlng,
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//creates the map
var mymap = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
//sets min and max zoom values
var opt = { minZoom: 7, maxZoom: 11 };
mymap.setOptions(opt);
//creates marker
var marker = new google.maps.Marker({
position: myLatlng,
map: mymap,
title:"Hello World!"
});
//content of infowindow
var contentString = '<h2>I am an info window</h2>'+'<p>Hello my name is infowindow, I need more text to test how big I get</p>';
//creates infowindow
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
//infowindow options
infowindow.setOptions({maxWidth:200});
//listens for click and opens infowindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mymap,marker);
});
// Bounds for UK
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(60.88770, -0.83496),
new google.maps.LatLng(49.90878, -7.69042)
);
// Listen for the dragend event
google.maps.event.addListener(mymap, 'dragend', function() {
if (strictBounds.contains(mymap.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = mymap.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;
mymap.setCenter(new google.maps.LatLng(y, x));
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>
난 당신이 마우스로 주변의지도를 이동할 때이 방법은 내가 줌 버튼 위에있는 탐색 도구를 사용하는 경우 그러나 난 여전히 이상 경계를 올 수있는, 잘 작동 것을 발견은,이 이걸 막는 멍청한거야? –
잘 잡으세요! 리스너의 이벤트 유형을'dragend'에서'bounds_changed'로 변경할 수 있습니다. 뷰포트의 변경 사항을 찾습니다. 경계를 넘어 축소, 끌기, 탐색 컨트롤 사용 등이 포함됩니다. 작업이 가능해서 기쁩니다! –
@MikeJeffrey strictBounds는 무엇을 의미하며 어떻게 싱가포르지도에 대한 long lat 찾기를합니까? –