Клуб API Карт

ноябрь 2017
Разные изображения для разных точек
r.frilans
1 ноября, 11:18

Добрый день. Есть на сайте карта, на ней выводяться больше 1000 точек.  Выводяться через  objectManager.add(placemarks); В placemarks лежит json. Для этих точек установлены кастомные иконки балунов

        objectManager.objects.options.set({
            iconLayout: 'default#image',
            // Своё изображение иконки метки.
            iconImageHref: '/images_v2/firm_shop_map.png',
            iconImageSize: [44, 42],
            iconImageOffset: [-16, -40],
            balloonShadow: false,
        });

Как сделать так, чтоб можно было поставить для части балунов другую иконку?

1 комментарий
Отмена режима редактирования полигона
Дмитрий Ращупкин
1 ноября, 12:15

Добрый вечер. Помогите есть 2 многоугольника при нажатии на многоугольник включается режим редактирования как сделать что бы принажатии на кнопку (ymaps.control.Button) он отправлял запрос (Это реализована функция) и отключал режим редактирования как обратиться ? или при нажатии на другой многоугольник он на 1 отключает а на втором включает

2 комментария
Polygon,geometryEditor.Polygon
Несколько независимых мультимаршрутов на одной карте?
seoperin
1 ноября, 12:35

Как можно разместить несколько независимых мультимаршрутов на одной карте?

Примерно как на скрине

5 комментариев
маршруты,Мультимаршрут,маршрутизатор
Как изменить свойства метки при hover неведении ?
vadimbashirof
1 ноября, 13:26

Использую версию яндекс карты 2.1

По разному пробовал, задавал вместо картинки svg изображение и во внутренностях прописывал стили при наведении, создавал метки при  помощи метода

ymaps.templateLayoutFactory.createClass ('<div class="placemark"></div>');

И просто прописывать стили в с css для hover эффекта

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

myPlacemark.events.add('hover', function () {
    
})

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

1 комментарий
Метки
API Карт на Я.Субботнике 11 ноября
ymapsapi
1 ноября, 14:18

11 ноября в Москве пройдет очередной Я.Субботник по разработке интерфейсов.

Разработчики Яндекса расскажут про многолетний путь библиотеки Лего — от папки с HTML-файлами до целой экосистемы. Также речь пойдёт об измерении улучшений дизайна продукта, эволюции инфраструктуры разработки поисковых интерфейсов, их тестировании и о других аспектах разработки интерфейсов.

Команду API Яндекс.Карт на конференции представит Всеволод Шмыров. Он расскажет про сенсорные события и был ли достигнут мир в войне двух утверждённых спецификаций.

Страница Я.Субботника: https://events.yandex.ru/events/yasubbotnik/11-november-2017/

Нет комментариев
Я.Субботник,мероприятия,новости,анонсы
Работа с картой и тайлами
Kbvjyfl2016
1 ноября, 18:50

Подскажите как выбрать кусок на карте и разбить его на тайлы.?

1 комментарий
Добавление класса верстке, лежащей в метке
veremeev.al
2 ноября, 08:43

вместо стандартной метки вставляется верстка, вот так 

iconLayout: squareLayout,
      iconShape: {   
          type: 'Rectangle',
          coordinates: [
            [-12, -20], [192, 12]
          ]
      }

в 

squareLayout

лежит блок с классом .point

как по клику на метку,  в блок с классом .point (который лежит внутри метки), добавить еще один класс .point_active, а у остальных  убрать этот класс?

само событие клика понятно, а что внутри написать, чтоб обратится к блоку .point и добавить класс.

place.events.add('click', function (e){
});

3 комментария
Метки
Карта иногда при загрузке падает
ya.andreyputilov
2 ноября, 13:13

Здравствуйте. В половине случаев карта при загрузке выдает
 

Uncaught TypeError: window.ym_map_fallback_url=https___api-maps_yandex_ru_2_1_56_map_js_filter=*_version=2_1 is not a function
    at map.js?callback=ym_map_fallback_url=https___api-maps_yandex_ru_2_1_56_map_js_filter=*_version=2_1&filter=*&version=2.1:1

В файле

https://api-maps.yandex.ru/2.1.56/map.js?callback=ym_map_fallback_url=https___api-maps_yandex_ru_2_1_56_map_js_filter=*_version=2_1&filter=*&version=2.1

А в половине загружается.

Карта вставлена следующим образом

<script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=VmLYNiWdpmHjb65zwL7ugOF5wc0wA9PI&width=100%&height=350&lang=ru_RU&sourceType=constructor"></script>

Подскажите, в чем проблема. Спасибо

4 комментария
Не могу поймать клик по маршруту
Ctepanov-tony
2 ноября, 15:14

ymaps.ready(init);
function init() {
var from = [55.049854, 55.955224];
var Route = {};
// Создание экземпляра карты.
var myMap = new ymaps.Map('map', {
center: [55.049854, 55.955224],
zoom: 11,
boundsAutoApply: true
}, ),
// Контейнер для меню.
menu = $('<ul class="menu-map"/>');

for (var i = 0, l = groups.length; i < l; i++) {
createMenuGroup(groups[i]);
}
function createMenuGroup (group) {
// Пункт меню.
var menuItem = $('<li><strong><a href="#">' + group.name + '</a></strong></li>'),
// Коллекция для геообъектов группы.
collection = new ymaps.GeoObjectCollection(null, { preset: group.style }),
// Контейнер для подменю.
submenu = $('<ul class="submenu"/>');
// Добавляем коллекцию на карту.
// myMap.geoObjects.add(collection);
// Добавляем подменю.
menuItem
.append(submenu)
// Добавляем пункт в меню.
.appendTo(menu)
// По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю.
.find('a')
.bind('click', function () {
if (collection.getParent()) {
myMap.geoObjects.remove(collection);
submenu.hide();
} else {
myMap.geoObjects.add(collection);
submenu.show();
}
});
for (var j = 0, m = group.items.length; j < m; j++) {
createSubMenu(group.items[j], collection, submenu);
}
}
function createSubMenu (item, collection, submenu) {
// Пункт подменю.
var submenuItem = $('<li><a href="#">' + item.name + '</a></li>'),
// Создаем метку.
placemark = new ymaps.Placemark(item.center, { balloonContent: item.name });
// Добавляем метку в коллекцию.
collection.add(placemark);
// Добавляем пункт в подменю.
submenuItem
.appendTo(submenu)
// При клике по пункту подменю открываем/закрываем баллун у метки.
.find('a')
.bind('click', function () {
myMap.geoObjects.remove(Route);

var to = placemark.geometry._coordinates;

Route = new ymaps.multiRouter.MultiRoute({
referencePoints: [from, to],
}, {

boundsAutoApply: true,
zoomMargin: 30
});

myMap.geoObjects.add(Route);
	Route.addEventListener("click", function(e){
console.log(e);
}, false);
console.log(myMap.getActiveRoute().balloon)
});
}

// Добавляем меню в тэг BODY.
menu.appendTo($('.city-name .container'));

}

Есть код который строит маршрут при клике на надпись http://antonstepanov.xyz/delivery.html

Нужно сделать так что бы балун открывался автоматически ( с примерным временем), а не при клике на маршрут. Пытался поймать маршрут через консоль не получается и симитировать клик тоже выходит, помогите пожалуйста

1 комментарий
Режим "Инкогнито"
papuska
2 ноября, 16:37

Здравствуйте, не загружается карта в браузере Файрфокс в режиме инкогнито, что делать? Спасибо

1 комментарий
Как перерисовать карту?
spirit-drive
2 ноября, 20:09

Подскажите функцию, на примере, как перерисовать карту?

Есть карта
 

ymaps.ready(init);
var myMap1,
    myMap2,
    myPlacemark1,
    myPlacemark2,
    myPlacemark3;

function init() {
    myMap1 = new ymaps.Map("map_1", {
        center: [45.04544779, 39.00158981],
        zoom: 11,
        controls: ['zoomControl']
    });
    
myPlacemark1 = new ymaps.Placemark([45.02388357, 39.06877350], {
    balloonContentHeader: 'Локация 1',
    balloonContent: 'ул. Сормовская, дом 12/11',
}, {
    iconLayout: 'default#image',
    iconImageClipRect: [[0, 0], [85, 124]],
    iconImageHref: 'img/label_map.png',
    iconImageSize: [33.33, 50],
    iconImageOffset: [-16.66, -50]
});
myPlacemark2 = new ymaps.Placemark([45.03811357, 39.02389400], {
    balloonContentHeader: 'Локация 2',
    balloonContent: 'ул. Школьная, дом 15/6'
}, {
    iconLayout: 'default#image',
    iconImageClipRect: [[85, 0], [170, 124]],
    iconImageHref: 'img/label_map.png',
    iconImageSize: [33.33, 50],
    iconImageOffset: [-16.66, -50]
});
myPlacemark3 = new ymaps.Placemark([45.05108607, 38.93185250], {
    balloonContentHeader: 'Локация 3',
    balloonContent: 'ул. 2-ая линия, дом 49'
}, {
    iconLayout: 'default#image',
    iconImageClipRect: [[170, 0], [255, 124]],
    iconImageHref: 'img/label_map.png',
    iconImageSize: [33.33, 50],
    iconImageOffset: [-16.66, -50]
});
    myMap1.geoObjects.add(myPlacemark1);
    myMap1.geoObjects.add(myPlacemark2);
    myMap1.geoObjects.add(myPlacemark3);

}
Пробовал так:
ymaps.myMap1.container.fitToViewport();

Пробовал так:
ymaps.myMap1.redraw();

Подключен скрипт 

https://api-maps.yandex.ru/2.1/?lang=ru_RU

Помогите

3 комментария
Подписаться на кнопку в баллуне.
alex.stark7
3 ноября, 13:15

Добрый день. В инструкции по оптимальному добавлению множества меток в файле data.json в содержимом баллуна присутствует кнопка submit.  А как на эту кнопку подписаться чтобы обработать нажатие, при этом в обработчик нажатия передать всё содержимое баллуна? В этом примере присутствует подписка на кнопку, но там кнопка создаётся в коде, а не в разметке включенной в json. Надо использовать я.карты в webview, но с javascript раньше особо не сталкивался, поэтому приходится просить совета

Нет комментариев
Как и когда выполнить setBounds
oleg.skrobuk
4 ноября, 00:39

Есть функция, которая выполняется по нажатию на кнопку:

$(".map-filter-menu .show-map").click(function() {
    $(".main-content .catalog-map").removeClass("hidden-xs");
});

Она удаляет класс у div, что приводит к его отображению, на котором отображена отображена яндекс карта. К сожалению у карты не очень хороший машбат (см картинку). Если добавить setBounds после удаления класса, маштаб уменьшится при повторном нажатии на кнопку. Как и где правильно добавить setBounds?

3 комментария
Отображение балуна результата поиска
Евгений Русецкий
4 ноября, 18:01

Добрый вечер!

Проблема следующая:

При построении маршрута через поиск (найти адрес, выбрать его, выбрать как добраться) отображается информационный балун,

при повторном поиске отображается балун с информацией о маршруте и кнопка подробнее.

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

Код скрипта:

ymaps.ready(function() {
    var targetCoords = [55.6785, 37.782],
        myMap = new ymaps.Map('map1', {
            center: [55.6782, 37.768],
            zoom: 16,
            boundsAutoApply: true
        }, {
            searchControlResults: 1,
            searchControlNoCentering: true,
            buttonMaxWidth: 200
        }),
        targetPoint = new ymaps.Placemark(targetCoords, {
            iconContent: ''
        }, {
            preset: 'islands#dotCircleIcon',
            iconColor: '#8224e3'
        }),
        searchControl = myMap.controls.get('searchControl'),
        geolocationControl = myMap.controls.get('geolocationControl'),
        routeTypeSelector = new ymaps.control.ListBox({
            data: {
                content: 'Как добраться'
            },
            items: [new ymaps.control.ListBoxItem('На автомобиле'), new ymaps.control.ListBoxItem('Общественным транспортом'), new ymaps.control.ListBoxItem('Пройти пешком')],
            options: {
                itemSelectOnClick: false
            }
        }),
        autoRouteItem = routeTypeSelector.get(0),
        masstransitRouteItem = routeTypeSelector.get(1),
        pedestrianRouteItem = routeTypeSelector.get(2),
        sourcePoint, currentRoute, currentRoutingMode;
    myMap.geoObjects.add(targetPoint);
    myMap.behaviors.disable('scrollZoom');
    myMap.controls.add(routeTypeSelector);
    autoRouteItem.events.add('click', function(e) {
        createRoute('auto', e.get('target'));
    });
    masstransitRouteItem.events.add('click', function(e) {
        createRoute('masstransit', e.get('target'));
    });
    pedestrianRouteItem.events.add('click', function(e) {
        createRoute('pedestrian', e.get('target'));
    });
    myMap.events.add('click', onMapClick);
    searchControl.events.add('resultshow', onSearchShow);
    geolocationControl.events.add('locationchange', onGeolocate);

    function onMapClick(e) {
        clearSourcePoint();
        sourcePoint = new ymaps.Placemark(e.get('coords'), {
            iconContent: 'Отсюда'
        }, {
            preset: 'islands#greenStretchyIcon'
        });
        myMap.geoObjects.add(sourcePoint);
        createRoute();
    }

    function onSearchShow(e) {
        clearSourcePoint(true);
        sourcePoint = searchControl.getResultsArray()[e.get('index')];
        createRoute();
    }

    function onGeolocate(e) {
        clearSourcePoint();
        sourcePoint = e.get('geoObjects').get(0);
        createRoute();
    }

    function clearSourcePoint(keepSearchResult) {
        if (!keepSearchResult) {
            searchControl.hideResult();
        }
        if (sourcePoint) {
            myMap.geoObjects.remove(sourcePoint);
            sourcePoint = null;
        }
    }

    function createRoute(routingMode, targetBtn) {
        if (routingMode) {
            if (routingMode == 'auto') {
                masstransitRouteItem.deselect();
                pedestrianRouteItem.deselect();
            } else if (routingMode == 'masstransit') {
                autoRouteItem.deselect();
                pedestrianRouteItem.deselect();
            } else if (routingMode == 'pedestrian') {
                autoRouteItem.deselect();
                masstransitRouteItem.deselect();
            }
            targetBtn.select();
            routeTypeSelector.collapse();
        } else if (currentRoutingMode) {
            routingMode = currentRoutingMode;
        } else {
            return;
        }
        if (!sourcePoint) {
            currentRoutingMode = routingMode;
            geolocationControl.events.fire('press');
            return;
        }
        clearRoute();
        currentRoutingMode = routingMode;
        currentRoute = new ymaps.multiRouter.MultiRoute({
            referencePoints: [sourcePoint, targetPoint],
            params: {
                routingMode: routingMode,
                boundsAutoApply: true
            }
        });
        currentRoute.model.events.add('requestsuccess', function() {
            currentRoute.getWayPoints().get(0).events.fire('click');
        });
        myMap.geoObjects.add(currentRoute);
    }

    function clearRoute() {
        myMap.geoObjects.remove(currentRoute);
        currentRoute = currentRoutingMode = null;
    }
    myMap.behaviors.disable('scrollZoom');
});

Заранее благодарю!

5 комментариев
Каким способом можно удалить маркер после клика по нему?
prozaik81-2
4 ноября, 22:33

Подскажите пожалуйста какой способ использовать для удаления маркера после клика по нему? Вот мой минимальный пример кода. Здесь после клика по карте созаётся маркер, выводится на карту и его координаты сохраняются в localStorage.

js:

ymaps.ready(init);

var myMap,
    collectionMarkers,
    myPlacemark;

function init(){     
    myMap = new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 7
    });

    collectionMarkers = new ymaps.GeoObjectCollection({}, {
        preset: "islands#redIcon"
    });

    myMap.geoObjects.add(collectionMarkers);

    renderSavedPoints();

    myMap.events.add('click', function (e) {
        var coords = e.get('coords');
        console.log('lat:', coords[0], 'lng:', coords[1]);

        var placemark = new ymaps.Placemark([coords[0], coords[1]]); 
        addRightClickEvent(placemark);   
        collectionMarkers.add(placemark);  

        addToStoragePoint({
            lat: coords[0],
            lng: coords[1]
        });       
    });
};

function getPoints() {
    return localStorage.points ? JSON.parse(localStorage.points) : [];
};

function addToStoragePoint(pointObj) {
    console.log('addToStoragePoint start');
    var points = getPoints();
    points.push(pointObj);
    localStorage.points = JSON.stringify(points);
};

function renderSavedPoints() {
    console.log('renderSavedPoints start', collectionMarkers);
    var points = getPoints();

    points.forEach((point) => {        
        // console.log('lat:', point.lat, 'lng:', point.lng);
        var placemark = new ymaps.Placemark([point.lat, point.lng]);    
        addRightClickEvent(placemark);     
        collectionMarkers.add(placemark);
    });
};

function addRightClickEvent(placemark) {
    placemark.events.add('contextmenu', function (e) {
        var pointLat = e.get('coords')[0],
            pointLng = e.get('coords')[1];

        console.log('right click', e.get('coords'), pointLat, pointLng);        
        var points = getPoints(),
            newPoints = [];

        points.forEach((point) => {        
            console.log('lat:', point.lat, 'lng:', point.lng);
            if(point.lat != pointLat && point.lng != pointLng ) {
                console.log('add!!');
                newPoints.push(point);
            } else {
                console.log('del!!');
            }
        }); 

        localStorage.points = JSON.stringify(newPoints);     


    });     
};

JSFIDDLE

Проблема в том, что после клика правой кнопкой мыши по маркеру не происходит удаление из localStorage объекта с координатами маркера. И соответственно карта не перерисовывается на основе нового localStorage/

6 комментариев
remove placemark
Как сделать так, чтобы в шапке происходил расчет стоимости как в примере что я приложил, и отображался балун с информацией о маршруте и кнопка подробнее на самой карте?
nikon7225
5 ноября, 10:28

сам скрипт

ymaps.ready(init);

function init() {
    // Стоимость за километр.
    var DELIVERY_TARIF = 17,
    // Минимальная стоимость.
        MINIMUM_COST = 150,
    // Заголовок панели.
        TITLE = 'Расчёт трансфер',
        myMap = new ymaps.Map('map', {
            center: [44.82707260919204,34.89896601000974],
            zoom: 9,
            type: 'yandex#map',
            controls: []
        }),
        
    // Создадим панель маршрутизации.
        routePanelControl = new ymaps.control.RoutePanel({
            options: {
                // Добавим заголовок панели.
                showHeader: true,
                title: TITLE
            }
        }),
        zoomControl = new ymaps.control.ZoomControl({
            options: {
                size: 'small',
                float: 'none',
                position: {
                    bottom: 350,
                    right: 10
                }
            }
        });
    // Пользователь сможет построить только автомобильный маршрут.
    routePanelControl.routePanel.options.set({
        types: {auto: true}
    });

 
 
    myMap.controls.add(routePanelControl).add(zoomControl);

    // Получим ссылку на маршрут.
    routePanelControl.routePanel.getRouteAsync().then(function (route) {

        // Повесим обработчик на событие построения маршрута.
        route.model.events.add('requestsuccess', function () {

            var activeRoute = route.getActiveRoute();
            if (activeRoute) {
                // Получим длину маршрута.
                var length = route.getActiveRoute().properties.get("distance"),
                // Вычислим стоимость маршрута.
                    price = calculate(Math.round(length.value / 1000)),
                // Создаём макет содержимого балуна маршрута.
            
                balloonContentLayout=ymaps.templateLayoutFactory.createClass(
                        '<span>Расстояние: ' + length.text + '.</span><br/>' +
                        '<span style="font-weight: bold; font-style: italic">Стоимость трансфер: ' + price + ' ₽.</span>');
                    
                // Задаём макет содержимого балуна маршрута.
                
                route.options.set('routeBalloonContentLayout', balloonContentLayout);
                // Задаём заголовок панели.
                routePanelControl.options.set('title', length.text + ' / ' + price + ' ₽.')
            } else {
                // Если на карте нет построенного маршрута, задаём дефолтный заголовок панели.
                routePanelControl.options.set('title', TITLE)
            }
        });

    });
    // Вычисляем стоимость маршрута.
    function calculate(routeLength) {
        return Math.max(routeLength * DELIVERY_TARIF, MINIMUM_COST);
    }
}

Нет комментариев
Как добавить на карту geometry.pixel.MultiLineString ?
Izotop
5 ноября, 12:01
Собственно geometry.pixel.MultiLineString не могу понять как добавить на карту.

В документации  https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/geometry.pixel.MultiLineString-docpage/  нету примеров, а мои попытки и эксперименты не дают никакого результата.

3 комментария
geometry.pixel.MultiLineString
Не растягивается в высоту islands#StretchyIcon
iKest
5 ноября, 13:05

В старом API при использовании twirl#redstretchyIcon можно было в названии выводить текст в несколько строк. В новом API (islands#StretchyIcon) содержимое обрезается по высоте. Как можно вывести текст внутри метки в несколько строк не используя HTML макеты? 

Спасибо

1 комментарий
Как получить доступ к опциям маркера?
prozaik81-2
5 ноября, 20:49

Я задаю свойства и опции для маркера так:

        var opt = {                  
            id: prop,                 
            hintContent: points[prop]['hint_text'] ? points[prop]['hint_text'] : '',
            balloonContent: points[prop]['baloon_text'] ? points[prop]['baloon_text'] : ''
        };

        var opt2 = {
            hasHint: true,  
            balloonCloseButton: points[prop]['baloon_close_icon'] ? points[prop]['baloon_close_icon'] : true
        };

        var placemark = new ymaps.Placemark([points[prop]['lat'], points[prop]['lng']], opt, opt2);   

Затем получаю свойства так:

    collectionMarkers.events.add('contextmenu', function(e) {
        var target = e.get('target');
        var id = target.properties.get('id');
        var baloonText = target.properties.get('balloonContent');
        var hintText = target.properties.get('hintContent');

Всё ок. Но я пытаюсь получить опции так:

var baloon_close_icon = target.properties.get('balloonCloseButton');

И здесь не ОК. Получаю значение undefined. Подскажите пожалуйста как получить значение опции.

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

2 комментария
options
Вращение картинки у Placemark
Николай Тихонов
6 ноября, 02:58

Здравствуйте.
Подскажите, пожалуйста, есть возможность указать угол вращения для каждой метки с собственным рисунком?

Я создаю менеджер, указывая параметры по умолчанию:

myObjectManager2 = new ymaps.ObjectManager(
{
	geoObjectIconLayout: "default#image",
	geoObjectIconImageHref: "pages/data/images/dot.png",
	geoObjectIconImageSize: [11, 11],
	geoObjectIconImageOffset: [-6, -6]
});

После чего добавляю точки:

myObjectManager2.add(
{
	type: 'Feature',
	id: ID,
	geometry:
	{
		type: 'Point',
		coordinates: [X, Y]
	},
	options:
	{
		
	},
	properties:
	{
		
	}
});

В домументации ничего подходящего не нашёл :(

1 комментарий
placemark,layout