Клуб API Карт

Как ограничить масштаб карты

ainab
26 июля 2013, 13:24

Вот здесь меняю:

// Диапазон доступных масштабов

if (options.layerMaxZoom >= 12 && options.layerMinZoom >= 9) {

    layer.getZoomRange = function () { 

        var promise = new ymaps.util.Promise();


Работает, но только после нажатия на значок масштаба, а мне нужно чтоб сразу после загрузки страницы с картой был такой ограниченный масштаб. Поскажите?

И еще - я могу же удалить выбор типа карты?

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
    <title>Примеры. Миграция кода создания пользовательского слоя с версии 1.x на 2.0</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU&coordorder=longlat" type="text/javascript"></script>
    <script type="text/javascript">
        ymaps.ready(init);
        function init() {
            var options = {
                tileUrlTemplate: "./%z/tile-%x-%y.png",
                controls: {
                    typeControl: true,
                    miniMap: false,
                    toolBar: true,
                    scaleLine: true
                },
                scrollZoomEnabled: true,
                // Координаты в 2.0 передаем ввиде массива [long, lat]
                mapCenter: [-178.874244689941, 85.0108183246281],
                /**
                 * Если хотим чтобы свой слой отображался без пождложки из Яндекс.Карт, то удаляем эту опцию:
                 * backgroundMapType: YMaps.MapType.NONE,
                 * Если хотим чтобы отображался поверх одного из типов карты,
                 * используем значение нужного типа:
                 * 'yandex#map' - тип карты "схема";
                 * 'yandex#satellite' - тип карты "спутник";
                 * 'yandex#hybrid' - тип карты "гибрид";
                 * 'yandex#publicMap' - тип карты "народная карта";
                 * 'yandex#publicMapHybrid'
                 * Таким образом:
                 * backgroundMapType: 'yandex#hybrid',
                 */
                mapZoom: 11,
                isTransparent: true,
                smoothZooming: false,
                layerKey: "my#layer",
                layerMinZoom: 9,
                layerMaxZoom: 12,
                mapType: {
                    name: "My maps",
                    textColor: "#000000"
                },
                copyright: ""
            },
                map = new ymaps.Map("YMapsID", {
                    center: options.mapCenter,
                    zoom: options.mapZoom
                }),
                MyLayer = function () {
                    var layer = new ymaps.Layer(options.tileUrlTemplate, {
                        tileTransparent: options.isTransparent
                    });
                    // Копирайты
                    if (options.copyright) {
                        layer.getCopyrights = function () {
                            var promise = new ymaps.util.Promise();
                            promise.resolve(options.copyright);
                            return promise;
                        };
                    }
                    // Диапазон доступных масштабов
                    if (options.layerMaxZoom >= 12 && options.layerMinZoom >= 9) {
                        layer.getZoomRange = function () {
                            var promise = new ymaps.util.Promise();
                            promise.resolve([options.layerMinZoom, options.layerMaxZoom]);
                            return promise;
                        };
                    }
                    return layer;
                };
            // Добавим слой в хранилище слоев под ключом options.layerKey
            ymaps.layer.storage.add(options.layerKey, MyLayer);
            var mapLayers = typeof options.backgroundMapType === 'string' ?
                ymaps.mapType.storage.get(options.backgroundMapType).getLayers() : [],
                // Создадим тип карты, состоящий из нашего слоя
                myMapType = new ymaps.MapType(options.mapType.name, (mapLayers.unshift(options.layerKey), mapLayers));
            // Добавим в хранилище типов карты
            ymaps.mapType.storage.add(options.layerKey + 'Type', myMapType);
            // Теперь мы можем задавать наш тип карты любой карте
            map.setType(options.layerKey + 'Type');
            if (options.controls.typeControl) {
                map.controls.add(new ymaps.control.TypeSelector([options.layerKey + 'Type', 'yandex#map', 'yandex#satellite', 'yandex#hybrid']));
            }
            if (options.controls.miniMap) {
                map.controls.add('miniMap');
            }
            if (options.controls.toolBar) {
                map.controls.add('mapTools');
            }
            if (options.controls.scaleLine) {
                map.controls.add('scaleLine');
            }
            if (options.scrollZoomEnabled) {
                map.behaviors.enable('scrollZoom');
            }
            map.controls.add('zoomControl');
            /**
 БОНУС - Как добавлять метки
 */
            var myPlacemark = new ymaps.Placemark(options.mapCenter /* или так: [-178.874244689941, 85.0108183246281] или вот так: map.getCenter() */ , {
                // Контент балуна
                balloonContentBody: '<h3>Имя метки</h3>',
                // Произвольные пользовательские данные
                // Кладем сюда урл, на который надо перейти при клике на метку.
                url: 'http://yandex.ru'
            }, {
                /**
 Все доступные иконки смотри тут:
 */
                preset: 'twirl#houseIcon'
            }),
                // Для удобства будем добавлять через промежуточную коллекцию.
                myCollection = new ymaps.GeoObjectCollection();
            // Добавим коллекцию на карту.
            map.geoObjects.add(myCollection);
            // Добавим метку в коллекцию.
            myCollection.add(myPlacemark);
            // Сразу откроем на метке балун
            // myPlacemark.balloon.open();
            // Удалить все метки с карты
            // myCollection.removeAll();
            // При клике на метку, вместо открытия балуна, сразу переходим на другой урл.
            myCollection.options.set('hasBalloon', false);
            myCollection.events.add('click', function (e) {
                var geoObject = e.get('target'); // Геообъект, по которому кликнули (метка).
                window.location.href = geoObject.properties.get('url');
            });
        }
    </script>
    <style type="text/css">
        #YMapsID {
            width: 900px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="hero-unit">
        <div class="container">
            <p>Миграция кода создания пользовательского слоя с версии 1.x на 2.0.</p>
            <div id="YMapsID"></div>
        </div>
    </div>
</body>
</html>

 

15 комментариев
Подписаться на комментарии к посту

Вот такой пример Беланков Анатолий сделал http://belankov.bitbucket.org/yandex_maps_01.html

Это о той же ситуации?

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

 

Вот здесь меняю:

// Диапазон доступных масштабов

if (options.layerMaxZoom >= 12 && options.layerMinZoom >= 9) {

    layer.getZoomRange = function () { 

        var promise = new ymaps.util.Promise();

Здесь менять не надо.

В объекте options итак эти значения есть (посмотрите выше)

options.layerMaxZoom у Вас равен 12

а

 options.layerMinZoom равен 9

т.е.

у Вас получается

if(12 >= 12 && 9 >= 9 ){

    ...

}


Далее у карты есть опции maxZoom и minZoom

их можно установить для всех слоев.


Чтобы убрать контрол переключения типов карты нужно заменить

typeControl: true,

на

typeControl: false,

Спасибо! Я знаю как убрать тип карты, просто спрашивала - можно ли убрать? Не противоречит ли соглашению или еще чему-нибудь.

Убрать можно, ничему не противоречит.

Я извиняюсь за наглость, но как сделать чтобы при нажатии на метку ссылка открывалась в новой вкладке, прописываю target='_blank' - ввобще карта перестает отображаться и в консоли пишет Uncaught SyntaxError: Unexpected token ILLEGAL.

Что не так?

target="_blank" это в html прописывается, а тут переход с помощью javascript.

так что прописать это некуда.

Смотрите в сторону window.open, но если в броузере клиента стоит блокировка открытия новых окон (а так бывает часто) то ничего не откроется

здравствуйте, нужно добавить получение координат на карту, добавляю var thisPlacemark = e.get('target');

   // Определение координат метки 

   var coords = thisPlacemark.geometry.getCoordinates();

   // и вывод их при щелчке на метке

   thisPlacemark.properties.set('balloonContent', coords);

координаты не выводит почему-то, что-то не так делаю?

добавьте их на этапе создания метки

так? draggable: true, // метку можно перемещать

preset: 'twirl#buildingsIcon' 

Нет

это опции (3-й параметр), а вам нужно добавить balloonContent во второй

Спасибо вам за помощь! Нужно чтобы переход по ссылке был и координаты получить, вместе это можно сделать?

 

balloonContentBody: '

Имя метки

',

        // Произвольные пользовательские данные

// Кладем сюда урл, на который надо перейти при клике на метку.

        url: 'http://yandex.ru'

    }, {

        draggable: true, // метку можно перемещать

preset: 'twirl#buildingsIcon'

Не очень понимаю что нужно сделать в итоге?

И то и другое... извиняюсь за назойливость

Создайте новый пост в клубе и подробно опишите что Вы хотите получить. Кажется что уже не про ограничение масштаба речь