Google Maps API: предотвращение перетаскивания в серую область - PullRequest
Новая
       5

Google Maps API: предотвращение перетаскивания в серую область

6 голосов
/ 10 ноября 2010

Я использую Google Maps API (v3) для рендеринга карты мира. Когда я полностью уменьшаю масштаб (до уровня 1) и начинаю перетаскивать холст, я могу выйти за границы карты, и область снаружи отображается серым цветом. Я хочу, чтобы пользователь не перетаскивал карту за пределы карты мира. Как мне это сделать?

Ответы [ 3 ]

2 голосов
/ 19 сентября 2013 

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>
0 голосов
/ 02 ноября 2018

Я знаю, что этот вопрос довольно старый, но я искал ответ и нашел этот пост.

Я думаю, мой ответ мог бы стать лучше принятого.

Вместо отправки пользователя обратно в произвольный центр переместите карту обратно к краю серой области. 

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
            )
        )};
    }
}

Надеюсь, это кому-нибудь поможет.

0 голосов
/ 08 февраля 2011

Вы можете установить minZoom и maxZoom, чтобы убедиться, что доступные уровни масштабирования находятся в пределах ваших границ, надеюсь, это поможет?

...