代码之家 › 专栏 › 技术社区 › jeffreyveon

Google Maps API:防止拖入灰色区域

google-maps

jeffreyveon · 技术社区 · 14 年前

我正在使用Google Maps API(v3)来呈现一个世界地图。当我一直向外缩放(缩放级别1)并开始拖动画布时,我能够移出地图边界,并且外部区域显示为灰色。我想防止用户将地图拖到世界地图的边界之外。我该怎么做?

3 回复 | 直到 14 年前

-4

sairafi 14 年前

您可以设置minZoom和maxZoom以确保可用的缩放级别在您的范围内,希望这有帮助?

Kunal 7 年前

var map;
function initialize() {
    var myLatlng = new google.maps.LatLng(0,0);
    var myOptions = {
      zoom: 1,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);	
	  map.addListener( 'drag', function() { handle(); });
	  //map.addListener( 'zoom_changed', function() { handle(); });
}

function handle(){
		var proj = map.getProjection();
		var bounds = map.getBounds();
		var sLat = map.getBounds().getSouthWest().lat();
		var nLat = map.getBounds().getNorthEast().lat();
		if (sLat < -85 || nLat > 85) {
			// alert('Gray area visible');
			map.setOptions({
			  zoom: 1,
              center: new google.maps.LatLng(
                  0 , // set Latitude for center of map here
                  0) // set Langitude for center of map here
              });         
			//Map.fitBounds(boundsNew); 
			// Or Define bound that u want show
		}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script async defer src="https://maps.googleapis.com/maps/api/js">
</script>
</head>
<body onload="initialize()" >
<div id="map_canvas" style="width:500px;height:500px;"></div>
</body></html>

Julien B. 6 年前

我知道这个问题已经很老了,但我在寻找答案时发现了这个帖子。

不要将用户发送回任意中心,而是将地图移回灰色区域的边缘。

var map;
function initialize() {
    var myLatlng = new google.maps.LatLng(0,0);
    var myOptions = {
      zoom: 1,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);    
      map.addListener( 'drag', function() { handle(); });
      //map.addListener( 'zoom_changed', function() { handle(); });
}

function handle(){
    var bounds = map.getBounds();
    var center = map.getCenter();
    var sLat   = bounds.getSouthWest().lat();
    var nLat   = bounds.getNorthEast().lat();
    var cLat   = center.lat();
    var cLng   = center.lng();
    if (sLat < -85) {
        map.setOptions({
            center: new google.maps.LatLng(
                cLat + ((sLat + 85) * -1),
                cLng
            )
        )};
    }
    if (nLat > 85) {
        map.setOptions({
            center: new google.maps.LatLng(
                cLat - nLat + 85,
                cLng
            )
        )};
    }
}

希望这能帮上忙。

推荐文章

onesiumus · 使用Google Places Insights API搜索酒吧时,如何排除与食物相关的次要类型?

5 月前

Dave · 谷歌地图脚本缩放根本不起作用

1 年前

mrbob · Google Places Autocomplete不工作,接收到我的函数不是函数的错误

1 年前

JonasEngstrom · 如何使用R将地图坐标从SWEREF99 TM转换为WGS84?

1 年前

Chichi · 我如何在我的地点自动补全片段上添加历史记录?

1 年前

JesseB1234 · 谷歌地图多个多边形/颜色缩放变黑/颜色错误

1 年前

LostTexan · 谷歌地图在flutter应用程序中显示错误的当前位置

1 年前

LostTexan · 使用谷歌地图API获取当前位置

1 年前

Daniel Loiterton · 在街景中显示AdvancedMarkerElement

1 年前

kryptonian · React谷歌地图信息覆盖市场的窗口

1 年前