Quantcast
Channel: Клуб API Карт
Viewing all 7380 articles
Browse latest View live

Да как же работает .redraw()???

$
0
0
ymaps.ready(init);

var myMap1,
    myMap2,
    myPlacemark1,
    myPlacemark2,
    myPlacemark3;
function maps() {
    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]
    });
}
function init(){
    myMap1 = new ymaps.Map("map_1", {
        center: [45.04544779, 39.00158981],
        zoom: 11
    });
    maps();
    myMap1.geoObjects.add(myPlacemark1);
    myMap1.geoObjects.add(myPlacemark2);
    myMap1.geoObjects.add(myPlacemark3);

    myMap2 = new ymaps.Map("map_2", {
        center: [45.04544779, 39.00158981],
        zoom: 11
    });
    maps();
    myMap2.geoObjects.add(myPlacemark1);
    myMap2.geoObjects.add(myPlacemark2);
    myMap2.geoObjects.add(myPlacemark3);
}

Вот такой код карты. 

$('.faq .address-button').click(function () {
    var time = 600;
    $('.faq__maps').slideToggle(time);
    ymaps.myMap1.redraw();
});

Вот такой код

Пробовал и 

myMap1.redraw();

и 

ymaps.redraw();

Так как на самом деле работает эта функция?


Разные изображения для разных точек

$
0
0

Добрый день. Есть на сайте карта, на ней выводяться больше 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,
        });

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

Отмена режима редактирования полигона

$
0
0

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

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

$
0
0

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

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

Как изменить свойства метки при hover неведении ?

$
0
0

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

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

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

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

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

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

})

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

API Карт на Я.Субботнике 11 ноября

$
0
0

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

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

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

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

Работа с картой и тайлами

$
0
0

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

как можно поставить на карте километровые отметки?

$
0
0

мне необходимо посмотреть например М-1, 73 км. как это можно сделать?


Добавление класса верстке, лежащей в метке

$
0
0

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

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

в 

squareLayout

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

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

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

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

Карта иногда при загрузке падает

$
0
0

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

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>

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

Не могу поймать клик по маршруту

$
0
0

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

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

Режим "Инкогнито"

$
0
0

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

Как перерисовать карту?

$
0
0

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

Есть карта
 

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

Помогите

Добавить в ObjectManager метки с разными опциями и данными и разными шаблонами баллуна

$
0
0

Добрый день. Прошу простить за слабые познания JavaScript. Скорее всего из-за этого приходится задавать вопрос. Собираюсь исползовать Яндекс.Карты в WebView. Собственно взможно ли разместить на карте объекты как в этом примере, но так же использовать разные макеты баллуна для разных элементов?
Дело в том что мне нужно разместить на карте объекты двух типов: Метка вида А с баллуном вида А и если контент баллуна в добавок к обычному сценарию содержит определенные данные, то размещать не вида А, а метку вида В и соответственно баллун вида Б с кнопкой и её обработчиком внутри баллуна. То есть на этапе формирования data.json я буду определять как должен выглядеть тот или иной объект на карте в зависимости от актуальных данных полученных от сервера. Прошу прощения, если не совсем понятно выразился.

Подписаться на кнопку в баллуне.

$
0
0

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


Как и когда выполнить setBounds

$
0
0

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

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

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

Отображение балуна результата поиска

$
0
0

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

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

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

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

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

Код скрипта:

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

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

Каким способом можно удалить маркер после клика по нему?

$
0
0

Подскажите пожалуйста какой способ использовать для удаления маркера после клика по нему? Вот мой минимальный пример кода. Здесь после клика по карте созаётся маркер, выводится на карту и его координаты сохраняются в 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/

Как передать координаты метки в input?

$
0
0

Долго пытался разобраться, но не получилось. 
Подскажите пожалуйста как в данном примере (https://jsfiddle.net/yajwevmy/19/) передать координаты найденной точки и центра карты в input

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

$
0
0

сам скрипт

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

Viewing all 7380 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>