Как сделать радиус на карте яндекс

Как найти организацию

Поиск организаций можно выполнить следующими способами:

Через поля поиска «Что» и «Где»

Для быстрого поиска организаций воспользуйтесь основными полями поиска «Что» и «Где», расположенными в основном блоке поиска. С помощью строки поиска «Что» можно найти организацию по названию, адресу, телефону или сфере деятельности. В строке поиска «Где» можно указать конкретную область на карте, где будет выполняться поиск организаций: адрес, улица, район, остановка, место на карте. Если строка поиска «Где» будет пустой, то поиск организаций будет выполнен по всей карте города. Найденные организации будут отражены в справочнике «Организации», а также отмечены на карте. Найденную информацию можно отсортировать по времени работы организации и наличию web-сайта, нажав «Добавить фильтр» в верхней части справочника. Щелкните по названию организации, и вы увидите карточку компании: ее адрес, телефон, сайт, e-mail и ICQ (если они есть), расписание работы и информацию о способах оплаты товаров или услуг. Компании можно пометить цветными маркерами или добавить собственный комментарий прямо в программе. Для этого щелкните правой кнопкой мышки по карточке компании и выберите нужное действие. Изменения сохранятся и после выхода из программы, и при ее обновлении. Также потом можно будет выполнить поиск таких организаций с выбранными маркерами и заметками.

Расширенный поиск

Расширенный поиск позволяет найти организации по названию, адресу, рубрике, номеру телефона, адресу сайта или электронной почты. Поиск организаций выполняется по любому полю «Расширенного блока» поиска при использовании различных критериев (по отдельности или в сочетании):

По названию. Введите название организации или его часть. Найденные организации будут отражены в справочнике «Организации», а также отмечены значками на карте.

Поиск в заданном радиусе на карте

Поиск в радиусе позволяет находить организации в указанном радиусе на карте. Для этого выполните следующие действия.

Выберите инструмент «Радиус» в левом верхнем углу карты.

Еще по теме: Как сделать виртуальную карту Яндекс деньги?

Величину радиуса и его расположение на карте можно изменять также в том случае, когда инструмент «Радиус» отключен (то есть окно «Радиус» закрыто).

Выделение произвольной области на Яндекс картах

Задача: добавить инструментарий на Яндекс карты для выделения произвольной области.

Яндекс карты обладают огромным количеством возможностей и хорошей документацией. Но, когда необходимо сделать что-то не стандартное, документация не всегда может помочь. Одной из таких задач была реализация для одного из наших клиентов в рамках разработки системы управления клиентами aveCRM поиск объектов на карте, попадающих в произвольную область.

Рассмотрим на примере добавление дополнительной панели инструментов на карту.

html разметка блока карты

 
 
Выделение области:
          
 
 

.map_container < position:relative; >.mapMenu < position: absolute; z-index: 1; top: 20px; left: calc(50% - 130px); padding: 0 15px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 46px; background-color: #fff; border-radius: 24px; -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,.25); box-shadow: 0 2px 8px 0 rgba(0,0,0,.25); -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; >.mapMenu .title < padding: 0 10px; font-size: 14px; line-height: 1.57; color: #505152; >.mapMenu .mapMenuIcon < padding: 5px; width: 40px; height: 35px; cursor: pointer; color: #7b7b7b; background: 0 0; border: 0; outline-style: none; >.mapMenu .mapMenuIcon:hover < color: #000 >.mapMenu .mapMenuIcon.active, .mapMenu .mapMenuIcon.active:hover

$(function () < var polygonOptions = < strokeColor: '#1679e7', fillColor: '#a2c9d8', interactivityModel: 'default#transparent', strokeWidth: 4, opacity: 0.7 >; var canvasOptions = < strokeStyle: '#1679e7', lineWidth: 4, opacity: 0.7 >; ymaps.ready(['Map', 'Polygon']).then(function () < var map = new ymaps.Map('map', < center: [59.91807704072416, 30.30557799999997], zoom: 12 >); map.behaviors.disable('scrollZoom'); var polygon = null; if ($("input[name=in_poligon]").val() != '') < var point = $("input[name=in_poligon]").val(); point = point.split(','); var point_array = []; point.forEach(element =>< el = element.split('_') point_array.push([el[1], el[0]]); >); // Создаем многоугольник, используя класс GeoObject. var myGeoObject = new ymaps.GeoObject(< // Описываем геометрию геообъекта. geometry: < // Тип геометрии - "Многоугольник". type: "Polygon", // Указываем координаты вершин многоугольника. coordinates: [point_array], // Задаем правило заливки внутренних контуров по алгоритму "nonZero". fillRule: "nonZero" >, // Описываем свойства геообъекта. properties: < // Содержимое балуна. balloonContent: "Многоугольник" >>, < // Описываем опции геообъекта. // Цвет заливки. fillColor: '#a2c9d8', // Цвет обводки. strokeColor: '#1679e7', // Общая прозрачность (как для заливки, так и для обводки). opacity: 0.7, // Ширина обводки. strokeWidth: 4 // Стиль обводки. >); // Добавляем многоугольник на карту. map.geoObjects.add(myGeoObject); > var drawButton = document.querySelector('#draw_line'); drawButton.onclick = function () < drawButton.disabled = true; drawLineOverMap(map) .then(function (coordinates) < // Переводим координаты из 0..1 в географические. var bounds = map.getBounds(); coordinates = coordinates.map(function (x) < return [ // Широта (latitude). // Y переворачивается, т.к. на canvas'е он направлен вниз. bounds[0][0] + (1 - x[1]) * (bounds[1][0] - bounds[0][0]), // Долгота (longitude). bounds[0][1] + x[0] * (bounds[1][1] - bounds[0][1]), ]; >); // Тут надо симплифицировать линию. // Для простоты я оставляю только каждую третью координату. coordinates = coordinates.filter(function (_, index) < return index % 3 === 0; >); // Удаляем старый полигон. if (polygon) < map.geoObjects.remove(polygon); >// Создаем новый полигон polygon = new ymaps.Polygon([coordinates], <>, polygonOptions); map.geoObjects.add(polygon); drawButton.disabled = false; // На этом этапе переменная coordinates содержит координаты всех точек фигуры $(".mapMenu button").removeClass("active"); >); >; >); function drawLineOverMap(map) < var canvas = document.querySelector('#draw-canvas'); var ctx2d = canvas.getContext('2d'); var drawing = false; var coordinates = []; // Задаем размеры канвасу как у карты. var rect = map.container.getParentElement().getBoundingClientRect(); canvas.style.width = rect.width + 'px'; canvas.style.height = rect.height + 'px'; canvas.width = rect.width; canvas.height = rect.height; // Применяем стили. ctx2d.strokeStyle = canvasOptions.strokeStyle; ctx2d.lineWidth = canvasOptions.lineWidth; canvas.style.opacity = canvasOptions.opacity; ctx2d.clearRect(0, 0, canvas.width, canvas.height); // Показываем канвас. Он будет сверху карты из-за position: absolute. canvas.style.display = 'block'; canvas.onmousedown = function (e) < // При нажатии мыши запоминаем, что мы начали рисовать и координаты. drawing = true; coordinates.push([e.offsetX, e.offsetY]); >; canvas.onmousemove = function (e) < // При движении мыши запоминаем координаты и рисуем линию. if (drawing) < var last = coordinates[coordinates.length - 1]; ctx2d.beginPath(); ctx2d.moveTo(last[0], last[1]); ctx2d.lineTo(e.offsetX, e.offsetY); ctx2d.stroke(); coordinates.push([e.offsetX, e.offsetY]); >>; return new Promise(function (resolve) < // При отпускании мыши запоминаем координаты и скрываем канвас. canvas.onmouseup = function (e) < coordinates.push([e.offsetX, e.offsetY]); canvas.style.display = 'none'; drawing = false; coordinates = coordinates.map(function (x) < return [x[0] / canvas.width, x[1] / canvas.height]; >); resolve(coordinates); >; >); > $(".mapMenu button").on('click', function () < $(".mapMenu button").removeClass("active"); $(this).addClass("active"); >); >);

Полезные статьи в сфере веб-разработки и новости студии

Реймакс 23 декабря 2023

Перенос сайта студии Реймакс с системы управления сайтом 1С-Битрикс на Python/Django Нами выполнен…

aveCRM для эскорт агентства 22 декабря 2023

Проект работает на основе aveCRM. Услуги оказываются в Дубае, Франции, Сербии. Особеннос…

128.by 12 декабря 2023

На сайте можно купить аксессуары для автомобиля. Сайт работает на 1С-Битрикс, редакция Малый Бизнес…

• Обзор обновления aveCRM 7.804 января 2024
• Тонкости в работе с 1С-Битрикс 302 ноября 2023
• Обзор обновления aveCRM 7.725 сентября 2023

Вы готовы начать работу или получить консультацию?

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

© 2007 — 2024. Веб студия Реймакс. Беларусь, Гомель.

Размещение карты с выделением зоны

Используя сервис «Google Maps» Вы можете создать интерактивную карту с выделением зоны для сайта.

Чтобы работать с конструктором карт от Google, вам необходимо предварительно создать аккаунт или пройти авторизацию на сайте: https://www.google.com/

Видео: Размещение карты Google с выделением зоны

Создание новой карты

Перейдите в конструктор Google My Maps по адресу: https://www.google.com/maps/mm

Нажмите — «Создать новую карту«.

Далее, в строке поиска, введите необходимый адрес и нажмите на пиктограмму «Лупа«.

Курсор будет перемещен в место, которое вы указали в строке поиска.

Работа с линиями на карте

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

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

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

После этого, слева от карты вы увидите список созданных зон с произвольным наименованием и цветом.

Размещение карты с зонами на сайте

После окончания создания и редактирования карты, получите её код для дальнейшего размещения на сайте.

Для этого, нажмите «Поделиться» в левой части конструктора. Далее, откройте доступ по желанию.

Если доступ к документу запрещён для других пользователей — карту на сайте разместить не удастся.

После настройки доступа, кликните по троеточию и нажмите — «Добавить на сайт«.

Далее, вы получите код для публикации карты на вашем сайте.

Скопируйте код из всплывающего окна, и разместите его в форме редактирования страницы вашего сайта. Перейдите в редактирование содержимого раздела, где вы хотите разместить интерактивную карту.

Откройте HTML код страницы, кликнув по соответствующей иконке на панели инструментов.

Во всплывающем окне, необходимо разместить код интерактивной карты.

Вставьте код карты в конец содержимого (место размещения карты указано для примера — вы можете выбрать любое подходящее место в структуре страницы). Нажмите кнопку «Ок«.

После проделанных действий, нажмите кнопку «Сохранить«, и проверьте вывод карты на сайте.