Google Maps API 3 - 限制平移/地图范围 [英] Google Maps API 3 - limit pan/map bounds
问题描述
我对Google地图完全不熟悉，只是创建我的第一张地图，以便将其合并到我的网站中。
我试图限制用户可以移动到英国的区域，并在这里查看了几个帖子，这些帖子都给出了非常相似的答案，但是我避难无法让代码为我工作。 此解决方案与我所得到的距离最近但是每当我试图移动地图时，它都会以我的一个边界点为中心，我无法在其他地方移动它。
我可能犯了一个非常愚蠢的错误，在这种情况下，我很抱歉，但是我无法弄清楚什么是错的。有没有人有任何想法？
谢谢
我的代码如下（取自Google的示例代码，然后添加到） - 零件这与边界相关的是接近底部的，从设置英国边界开始：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< title> Google地图< / title>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：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>
<？
//代码从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;
//创建cUrl对象来使用$ geourl
$ c = curl_init（）;来获取XML内容。
curl_setopt（$ c，CURLOPT_URL，$ geourl）;
curl_setopt（$ c，CURLOPT_RETURNTRANSFER，1）;
$ csvContent = trim（curl_exec（$ c））;
curl_close（$ c）;
//用逗号分隔数据块
list（$ httpcode，$ elev，$ lat，$ long）= split（，，$ csvContent）;
？>
< script type =text / javascript>
var lat =<？= $ lat？>;
var long =<？= $ long？>;
< / script>
< script type =text / javascript>
函数initialize（）{
//设置地图的长和宽
var myLatlng = new google.maps.LatLng（lat，long）;
//地图选项
var myOptions = {
center：myLatlng，
zoom：9，
mapTypeId：google.maps.MapTypeId。 ROADMAP
};
//创建地图
var mymap = new google.maps.Map（document.getElementById（map_canvas），
myOptions）;
//设置最小和最大缩放值
var opt = {minZoom：7，maxZoom：11};
mymap.setOptions（opt）;
//创建标记
var marker = new google.maps.Marker（{
position：myLatlng，
map：mymap，
title： Hello World！
}）;
// infowindow的内容
var contentString ='< h2>我是信息窗口< / h2>'+'< p>您好，我的名字是infowindow，我需要更多用于测试我获得的大小的文本< / p>';
//创建infowindow
var infowindow = new google.maps.InfoWindow（{
content：contentString，
}）;
// infowindow选项
infowindow.setOptions（{maxWidth：200}）;
//监听点击并打开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）
）;
//监听dragend事件
google.maps.event.addListener（mymap，'dragend'，function（）{
if（strictBounds.contains（mymap.getCenter （））return;
//我们超出界限 - 将地图移回界限内
var c = mymap.getCenter（），
x = c。 lng（），
y = c.lat（），
maxX = strictBounds.getNorthEast（）。lng（），
maxY = strictBounds.getNorthEast（）。lat（），$ b $如果（x minY = strictBounds.getSouthWest（）。lat（）;
如果（y> maxY）; $ b $ if（x> maxX）x = maxX;
if（y
mymap.setCenter（new google.maps.LatLng（y，x））;
}）;
}
< / script>
< / head>
< body onload =initialize（）>
< div id =map_canvasstyle =width：50％; height：50％>< / div>
< / body>
< / html>
您将strictBounds混淆了 - 改变它们应该可以正常工作。
http://code.google.com/apis/maps/ documentation / javascript / reference.html＃LatLngBounds
var strictBounds = new google.maps.LatLngBounds（
new google.maps.LatLng（49.90878，-7.69042），
new google.maps.LatLng（60.88770，-0.83496）
）;
I am completely new to Google Maps and am just creating my first map so that I can incorporate it into my website.
I am trying to limit the area that the user can move around to just the UK and have looked at several posts on here that all give very similar answers, however I haven't been able to get the code to work for me. This solution is the closest that I have got however whenever I try and move the map at all it centers on one of my boundary points and I am unable to move it anywhere else.
I may have made a really silly mistake, in which case I apologise, however I can't work out what is wrong. Does anyone have any ideas?
Thank you
My code is below (taken from Google's sample code and then added to) - the part that is relevant to the bounds is near the bottom, starting with setting the bounds for the UK:
<!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>
You have your strictBounds mixed up - change the order of them and it should work fine.
A LatLngBounds should be SW corner first, NE corner second:
http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLngBounds
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(49.90878, -7.69042),
new google.maps.LatLng(60.88770, -0.83496)
);
这篇关于Google Maps API 3 - 限制平移/地图范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
