Вывод точек на карте Яндекс. Интеграция с Яндекс Карты
Введение
Карта с точками выводится как специальный режим компонента таблицы (viewMode=yamap).
Внимание! Бесплатная версия Яндекс Карт имеет ограничения. Про тарифы и ограничения бесплатной версии - https://yandex.ru/dev/maps/commercial/
Демостенд отображения точек на карте Яндекс.
Множество интерактивных примеров от Яндекса, которые позволят лучше понять настройки отображения карт - https://yandex.ru/dev/maps/jsbox/2.1/icon_customImage
Вывод маркеров на Яндекс Карте
Для настройки карты необходимо сделать следующее:
0 Получаем ключ API Яндекс Карт - https://yandex.ru/dev/maps/jsapi/doc/2.1/quick-start/index.html#get-api-key. В будущем управлять своими ключами API Яндекса можно здесь - https://developer.tech.yandex.ru/services
1. Создаем таблицу без столбцов (столбцы можно будет добавить только в случае необходимости фильтров).
2. Прописываем GetItems
В SELECT 1 указываем точки
В SELECT 3 указываем viewType=yamap и yamapOptions
Пример:
CREATE PROCEDURE [dbo].[crud_yamap_getItems]
@filters CRUDFilterParameter READONLY,
@sort sql_variant,
@direction nvarchar(8),
@page int,
@pageSize int,
@username nvarchar(32)
AS
BEGIN
declare @points table (id int, lat float, lng float, hint nvarchar(max), draggable bit,
body nvarchar(max), header nvarchar(max), footer nvarchar(max), preset nvarchar(128),
icon nvarchar(max), iconCaption nvarchar(max), iconColor nvarchar(64), iconCaptionMaxWidth int,
formCode nvarchar(64), formItemID int, formBig int, formTitle nvarchar(256), formBtnText nvarchar(64))
insert into @points
select 1 id, 55.66 lat, 37.64 lng, 'hint1' hint1, 1 draggable,
'body1' body, 'header1' header, 'footer1' footer, '' preset,
'' icon, '' iconCaption, '' iconColor, 200 iconCaptionMaxWidth ,
'' formCode, '0' formItemID, 0 formBig, '' formTitle, '' formBtnText
union
select 1 id, 55.46 lat, 37.84 lng, 'hint2' hint1, 1 draggable,
'body2' body, 'header2' header, 'footer2' footer, '' preset,
'' icon, '' iconCaption, '' iconColor, 200 iconCaptionMaxWidth ,
'' formCode, '0' formItemID, 0 formBig, '' formTitle, '' formBtnText
-- SELECT 1
select *
from @points
-- SELECT 2
select 1
-- SELECT 3
select 1 HideTitleCount, 'yamap' viewtype,
'{
"height": "600px",
"key": "----------Наш ключ API----------------------------",
"searchProvider": "yandex#search",
"searchText": "",
"showUserLocation": false,
"mapParams": {
"center": [53.76, 37.64],
"zoom": 9
},
"clustererParams": {
"preset": "islands#invertedGreenClusterIcons"
},
"afterMoveMarkerRefreshContainer": "body"
}' yamapOptions
END
SELECT 1 имеет следующие параметры:
- id - идентификатор (нужен для сохранения позиции при перемещении)
- lat lng - координаты маркера
- hint - подсказка при наведении
- draggable - если 1, то точку можно перемещать
- body, header, footer - вывод некой разметки во всплывающем окошке при клике на маркер.
- preset - настройка отображения вида значка, например twirl#redStretchyIcon. Все примеры - https://yandex.ru/dev/maps/jsapi/doc/2.1/ref/reference/option.presetStorage.html
- icon, iconCaption, iconColor, iconCaptionMaxWidth - вывод у иконки текста, подсказки, изменение цвета иконки и ограничение длины подсказки (обрезка длинных названий).
- formCode, formItemID, formBig, formTitle, formBtnText - если указан formCode, то при клике на маркер будет выводиться модальная форма с itemID = formItemID. Если formBig=1, то окно будет большое. Кнопка сохранения имеет текст formBtnText, заголовок модального окна будет formTitle.
SELECT 3 - Настройки yamapOptions
- key - ключ АПИ Яндекс Карт. Получать здесь - https://yandex.ru/dev/maps/jsapi/doc/2.1/quick-start/index.html#get-api-key
- height - высота контейнера с картой. По умолчанию 400px.
- searchProvider - если активирован поиск в mapParams.controls (по умолчанию активирован), то данный параметр влияет на какие объекты будут искаться через поиск.
- searchText - если задан текст, то при загрузке карты сработает автоматический поиск и отображение найденных объектов.
- showUserLocation - если true, то на карте будет отражен значок местонахождения текущего пользователя (при условии, что он разрешил геолокацию в браузере).
- mapParams - настройки компонента Яндекс Карты (все свойства описаны здесь - https://yandex.ru/dev/maps/jsapi/doc/2.1/ref/reference/Map.html)
- center - установка центра карты
- zoom - какой будет масштаб карты по умолчанию при загрузке
- controls - массив выводимых элементов управления на карте (по умолчанию выводятся все элементы. Если необходимо все скрыть - то передаем [])
- clustererParams - настройки кластера маркеров (объединение нескольких маркеров в одну точку). Подробнее - https://yandex.ru/dev/maps/jsbox/2.1/clusterer_create
- afterMoveMarkerRefreshContainer - когда передвинули точку, есть потребность обновить часть экрана. В этом параметре указывается селектор для обновления области экрана. Пример: 'body'.
Как сохранить значение координат при передвижении маркера по карте
У точек необходимо установить draggable = 1.
Также необходимо реализовать updateItemField у таблицы.
CREATE PROCEDURE [dbo].[crud_yamap_updateField]
@itemID int,
@field nvarchar(64),
@value nvarchar(max),
@username nvarchar(64)
AS
BEGIN
print @itemID
print @value
print @field
if(@field = 'marker') begin
update t1
set lat = dbo.str_splitPart(@value, '||', 1), lng = dbo.str_splitPart(@value, '||', 2)
where id = @itemID
end else begin
select 'Невалидный код свойства' Msg, 0 Result
return
end
select '' Msg, 1 Result
END
Что передается на вход:
- в field приходит значение marker,
- value содержит координаты в виде lat||lng,
- itemID равно полю id из GetItems SELECT 1.
- Management
- Falcon Space Foundation
- Basic components
- Falcon Space Features
- Коммуникация с пользователем
- Дизайн, стилизация
- Integrations Integration import and parsing of a CSV file API integration DaData.ru address suggestions Integration of the IpGeoBase API City by IP address API integration DaData.ru City by IP address Falcon Space. Creating an API service (incoming and outgoing API requests) How to make a web hook Прием платежей через Яндекс.Кассу Online payments. Integration with ROBOKASSA (payment gateway) Zapier integration on the Falcon Space platform Integration of MANGO OFFICE call tracking (Platform mode) Integration of the API exchange Rates of the Central Bank of the Russian Federation Integration of the Russian Post API Integration API of the CDEK delivery service API integration Service delivery Business lines How to calculate the distance between two points with coordinates via Google Maps File transfer via FTP Scan barcodes and QR codes through the camera and from images Receiving data of the counterparty through the TIN Accepting payments on the website via CloudPayments Programmatic interaction via the API between 2 different Falcon instances Как сделать интеграцию с Мой Склад Внедрение подсказок dadata на сайт Вывод точек на карте Яндекс. Интеграция с Яндекс Карты Интеграция с телефонией Zadarma.com Как передать скрытый параметр при исходящем запросе из Request процедуры в Response Получение данных о контрагенте - интеграция с сервисом ЗаЧестныйБизнес Интеграция с AMO CRM Как импортировать данные в базу CRM из Google Контакты Вход/регистрация через ВКонтакте(vk.com)
- Каталоги
- Навигация
- Документы
- Additional component
- Продвижение, SEO
- Системные моменты
- HOWTO
- HOWTO Tables
- HOWTO Forms
- Working with SQL
- HOWTO JS
- HOWTO Layout
- Solve problems
Falcon Space Platform
This is a reduction in the cost of ownership
at the expense of fewer people to support
This is a quick change
while using the program
This is a modern interface
full adaptation for mobile devices
- Falcon Space Video
- Platform features demo will allow you to understand how this or that component looks and works
- Have a question? Write to the chat at the bottom right