Карт Google В3 - ограничить видимую область и масштаб

можно ли ограничить Google map v3 до определенной области? Я хочу разрешить отображение только некоторой области (например, страны) и запретить пользователю скользить в другом месте. Также я хочу ограничить уровень масштабирования-например, только между уровнями 6 и 9. И я хочу использовать все типы базовых карт.



есть ли способ этого добиться?



У меня был частичный успех с ограничением уровня масштабирования с помощью StyledMap, но мне удалось только с ограничением дорожной карты, я не смог ограничить увеличьте другие основные типы таким образом.



Спасибо за помощь

651   11  

11 ответов:

вы можете слушать dragend событие, и если карта перетаскивается за пределы разрешенных границ, переместите ее обратно внутрь. Вы можете определить допустимые границы в LatLngBounds

116  
2014-09-29 16:36:31

лучший способ ограничить уровень масштабирования может заключаться в использовании minZoom/maxZoom параметры, а не реагировать на события?

var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);

или параметры могут быть указаны во время инициализации карты, например:

var map = new google.maps.Map(document.getElementById('map-canvas'), opt);

посмотреть: Google Maps JavaScript API v3 ссылка

170  
2016-03-16 14:19:47

чтобы ограничить масштабирование на V. 3+. в настройках карты добавьте уровень масштабирования по умолчанию и minZoom или maxZoom (или оба, если требуется) уровни сигнала от 0 до 19. Вы должны объявить глухой уровень масштабирования, если требуется ограничение. все они чувствительны к регистру!

function initialize() {
   var mapOptions = {
      maxZoom:17,
      minZoom:15,
      zoom:15,
      ....
6  
2013-12-08 13:05:38

гораздо лучший способ ограничить диапазон... использовал логику сверху плаката.

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);
                           });
3  
2012-01-27 21:27:50 
myOptions = {
        center: myLatlng,
        minZoom: 6,
        maxZoom: 9,
        styles: customStyles,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
2  
2015-06-04 09:29:14

Это можно использовать для переназначения карты в определенное место. Именно это мне и было нужно.

    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));
        }
    });
1  
2014-02-27 11:36:10

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

        google.maps.event.addListener(this.map, 'idle', function() {
            var minLat = strictBounds.getSouthWest().lat();
            var minLon = strictBounds.getSouthWest().lng();
            var maxLat = strictBounds.getNorthEast().lat();
            var maxLon = strictBounds.getNorthEast().lng();
            var cBounds  = self.map.getBounds();
            var cMinLat = cBounds.getSouthWest().lat();
            var cMinLon = cBounds.getSouthWest().lng();
            var cMaxLat = cBounds.getNorthEast().lat();
            var cMaxLon = cBounds.getNorthEast().lng();
            var centerLat = self.map.getCenter().lat();
            var centerLon = self.map.getCenter().lng();

            if((cMaxLat - cMinLat > maxLat - minLat) || (cMaxLon - cMinLon > maxLon - minLon))
            {   //We can't position the canvas to strict borders with a current zoom level
                self.map.setZoomLevel(self.map.getZoomLevel()+1);
                return;
            }
            if(cMinLat < minLat)
                var newCenterLat = minLat + ((cMaxLat-cMinLat) / 2);
            else if(cMaxLat > maxLat)
                var newCenterLat = maxLat - ((cMaxLat-cMinLat) / 2);
            else
                var newCenterLat = centerLat;
            if(cMinLon < minLon)
                var newCenterLon = minLon + ((cMaxLon-cMinLon) / 2);
            else if(cMaxLon > maxLon)
                var newCenterLon = maxLon - ((cMaxLon-cMinLon) / 2);
            else
                var newCenterLon = centerLon;

            if(newCenterLat != centerLat || newCenterLon != centerLon)
                self.map.setCenter(new google.maps.LatLng(newCenterLat, newCenterLon));
        });

strictBounds объект new google.maps.LatLngBounds() тип. self.gmap сохраняет объект Карты Google (new google.maps.Map()).

это действительно работает, но не только забудьте принять во внимание геморрой с пересечением 0-го меридиана и параллели, если ваши границы охватывают их.

0  
2012-08-19 15:48:44

почему-то

if (strictBounds.contains(map.getCenter())) return;

не работает для меня (возможно, проблема южного полушария). Мне пришлось изменить его на:

    function checkBounds() {
        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 > maxX || y < minY || y > maxY) {
            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));
        }
    }

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

0  
2012-11-22 06:06:22

одно решение похоже, если вы знаете конкретный lat/lng.

google.maps.event.addListener(map, 'idle', function() {

    map.setCenter(new google.maps.LatLng(latitude, longitude));
    map.setZoom(8);

});

Если у вас нет конкретного lat / lng

google.maps.event.addListener(map, 'idle', function() {

    map.setCenter(map.getCenter());
    map.setZoom(8);

});

или

google.maps.event.addListener(map, 'idle', function() {

    var bounds = new google.maps.LatLngBounds();
    map.setCenter(bounds.getCenter());
    map.setZoom(8);

});
0  
2014-10-11 19:40:39

по состоянию на середину 2016 года, нет официального способа ограничить видимую область. Однако большинство специальных решений для ограничения границ имеют недостаток, поскольку они не ограничивают границы точно в соответствии с видом карты, они ограничивают его только в том случае, если центр карты находится за пределами указанных границ. Если вы хотите ограничить границы наложением изображения, как я, это может привести к поведению, как показано ниже, где карта подложки видна под нашим изображением наложение:

enter image description here

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

однако, как и другие существующие решения, он имеет "вибрирующую" проблему. Когда пользователь достаточно агрессивно перемещает карту, после того, как он отпустит левую кнопку мыши, карта все еще продолжает перемещаться сама по себе, постепенно замедляясь. Я всегда возвращаю карту обратно в границы, но это приводит к своего рода вибрации. Этот эффект панорамирования не может быть остановлен никакими средствами, предоставляемыми JS API на данный момент. Похоже, что пока google не добавляет поддержку чего-то вроде map.stopPanningAnimation() мы не сможем создать гладкий опыт.

пример с использованием упомянутой библиотеки, самый гладкий строгий опыт границ, который я смог получить:

function initialise(){
  
  var myOptions = {
     zoom: 5,
     center: new google.maps.LatLng(0,0),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  var map = new google.maps.Map(document.getElementById('map'), myOptions);
  
  addStrictBoundsImage(map);
}

function addStrictBoundsImage(map){
	var bounds = new google.maps.LatLngBounds(
		new google.maps.LatLng(62.281819, -150.287132),
		new google.maps.LatLng(62.400471, -150.005608));

	var image_src = 'https://developers.google.com/maps/documentation/' +
		'javascript/examples/full/images/talkeetna.png';

	var strict_bounds_image = new StrictBoundsImage(bounds, image_src, map);
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load("maps", "3",{other_params:"sensor=false"});
      </script>
<body style="margin:0px; padding:0px;" onload="initialise()">
	 <div id="map" style="height:400px; width:500px;"></div>
     <script  type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script>
</body>

библиотека также может рассчитать минимальный масштаб ограничение автоматически. Затем он ограничивает уровень масштабирования с помощью карты.

надеюсь, это поможет кому-то, кто хочет решение, которое полностью уважает данные границы и не хочет, чтобы панорамирование из них.

0  
2016-06-10 21:38:09

Это может быть полезным.

  var myOptions = {
      center: new google.maps.LatLng($lat,$lang),
      zoom: 7,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

уровень сигнала может быть ориентирован на заказчика согласно требованию.

-4  
2013-12-08 13:05:15

Comments

    Ничего не найдено.
Click here to cancel reply.