Вывод точек на карте Яндекс. Интеграция с Яндекс Карты

Введение

Карта с точками выводится как специальный режим компонента таблицы (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 имеет следующие параметры: 

SELECT 3 - Настройки yamapOptions

Как сохранить значение координат при передвижении маркера по карте 

У точек необходимо установить 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

Что передается на вход: 

Дополнительные материалы

  1. Интеграция с Яндекс XML API
  2. Интеграция API Яндекс.Вебмастер
  3. Интеграция с Тургенев API для проверки качества контента
  4. Интеграция с Google Drive API
  5. Базовая интеграция с Jitsi Meet
  6. Интеграция с Vox Implant

 

Страница-источник на сайте falconspace.ru