lit google map Скачать - lit google map Sourced Code Скачать

lit google map

Другой исходный код

1.0.0

Скачать

Lit-Google-карта

Этот проект является портом Google-Map Webcomponent на основе библиотеки Lit V2.

Обновление v1.0.0 (23/02/2022)

Проект переносится в Lit V2
Добавлены формы: круг и многоугольник
Исправления ошибок

Как использовать

Включите в файл HTML в HTML-пакет:

 < script src =" lit-google-map.bundle.js " > </ script >

или его минимизированная версия:

 < script src =" lit-google-map.bundle.min.js " > </ script >

Используйте компонент в любом месте, которое вы хотите (не забудьте заполнить ключ API Google Maps):

 < lit-google-map api-key =" YOUR_GOOGLE_MAPS_API_KEY " >    
</ lit-google-map >

Вы также можете включить любое количество маркеров карты:

 < lit-google-map api-key =" YOUR_GOOGLE_MAPS_API_KEY " >
    < lit-google-map-marker slot =" markers " latitude =" 49.4404582 " longitude =" 20.2700361 " >
    </ lit-google-map-marker >  
    < lit-google-map-marker slot =" markers " latitude =" 50.797444 " longitude =" 20.4600623 " >
    </ lit-google-map-marker >
</ lit-google-map >

или/и формы:

 < lit-google-map api-key =" YOUR_GOOGLE_MAPS_API_KEY " >  
    < lit-google-map-circle slot =" shapes " center-latitude =" 49.4404582 " center-longitude =" 20.2700361 " >
    </ lit-google-map-circle >
</ lit-google-map >

Атрибуты элемента карты

« Api -Key » - Google Map API -ключ
« Язык » - Язык карты Google (необязательно)
' Map -ID ' - Google Map Mapid (необязательно)
« Версия » - версия скрипта Google Map JS для загрузки (по умолчанию: '3.48')
« Стили » - стили карты в формате JSON (необязательно)
' Zoom ' - Уровень Zoom (по умолчанию: '8')
« Fit-To-Markers »-область карты подключения для отображения всех маркеров
' Map -type ' - тип карты для отображения: «Дорожная карта», «спутник», «гибрид», «местность»
« Центральная-лайту »- широта начальной центральной точки карты
« Центр -долготы » - долгота карты начальная центральная точка

Пример:

 < lit-google-map api-key =" SOME_API_KEY " zoom =" 6 " map-type =" satellite " center-latitude =" 51.8436554 " center-longitude =" 19.5070867 " >    
</ lit-google-map >

Атрибуты маркера элемента

« Широта » - позиция маркера широты
« Долгота » - позиция долготы маркера
« метка » - маркер
« z -Index » - индекс маркера z
« Icon » - значок маркера URL -адреса изображения

Пример:

 < lit-google-map-marker slot =" markers " latitude =" 49.4404582 " longitude =" 20.2700361 " >
</ lit-google-map-marker >

Маркеры также могут иметь ассоциированное InfoWindow с HTML -контентом:

 < lit-google-map-marker slot =" markers " latitude =" 50.797444 " longitude =" 20.4600623 " >
    < p > Some description </ p >
    < img src =" some_image.jpg " alt =" some image " >
</ lit-google-map-marker >

Атрибуты элемента формы круга

« Центральная -ластиту » - положение круговой центральной широты
« Центр -долготы » - круговое центральное положение долготы
« Радиус » - Радиус круга (по умолчанию: 100000)
« Cill -Color » - Circle Fill Color
« Заполнение » - кружкой заполнить непрозрачность
« Cluck -Color » - Цвет хода кругового удара
« ударность инсульта » - непрозрачность кругового хода
« Весота

Пример:

 < lit-google-map-circle slot =" shapes " center-latitude =" 53.176389 " center-longitude =" 22.073056 " radius =" 50000 "  fill-color =" #7FB3D5 " fill-opacity =" 0.35 " stroke-color =" #2874A6 " stroke-opacity =" 0.8 " stroke-weight =" 5 " >
</ lit-google-map-circle >

Атрибуты элемента формы полигона

« Пути » - Полигонные пути точки в форме массива JSON
« Cillgon Color » - «заполняющий цвет»
« Заполнение » - Полигоновая заливка непрозрачности
« Colring -Color » - цвет хода многоугольника
« Ускоренность инсульта » - непрозрачность инсульта из полигона
« Весотаж » - вес хода многоугольника

Пример:

 < lit-google-map-polygon slot =" shapes " paths =' [{"lat": 53.7332, "lng": 15.5180}, {"lat": 54.0444, "lng": 18.1379}, {"lat": 53.2028, "lng": 16.9292}, {"lat": 53.7332, "lng": 15.5180}] ' fill-color =" #7FB3D5 " fill-opacity =" 0.35 " stroke-color =" #2874A6 " stroke-opacity =" 0.8 " stroke-weight =" 5 " >
</ lit-google-map-polygon >