lit google map 다운로드 -Lit lit google map 소스 코드 다운로드

lit google map

기타 소스코드

1.0.0

다운로드

lit-google-map

이 프로젝트는 Lit V2 라이브러리를 기반으로 한 Google-Map 웹 컴퓨터의 Port입니다.

업데이트 v1.0.0 (23/02/2022)

프로젝트가 v2를 조명으로 포팅했습니다
추가 모양 : 원과 다각형
버그 수정

사용 방법

HTML 파일에 lit-google-map 번들 포함 :

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

또는 최소화 된 버전 :

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

원하는 곳에서 구성 요소를 사용하십시오 (Google Maps API 키를 채우십시오) :

 < 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')
' Styles ' - JSON 형식의지도 스타일 (선택 사항)
' 줌 ' - 줌 레벨 (기본값 : '8')
' 마커에 적합한 마커'-모든 마커를 표시 할 수있는 맵 영역
' 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 인덱스
' 아이콘 ' - 마커 아이콘 이미지 URL

예:

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

마커는 또한 HTML 컨텐츠와 Infowindow를 연관시킬 수도 있습니다.

 < 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)
' Fill -Color ' - 원을 채우는 색상
' Fill -opacity ' - 원을 채우는 불투명도
' 스트로크 컬러 ' - 원형 스트로크 컬러
' 스트로크 - 능력 ' - 원 스트로크 불투명도
' 스트로크 - 가이트 ' - 원 뇌졸중 무게

예:

 < 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 >

다각형 모양 요소 속성

' Paths ' - 다각형 경로는 JSON 어레이 형태의 포인트
' Fill -Color ' - 다각형 채우기 색상
' Fill -opacity ' - 다각형 채우기 불투명도
' 스트로크 컬러 ' - 다각형 스트로크 컬러
' 스트로크 - 능력 ' - 다각형 뇌졸중 불투명도
' 스트로크 - 가이트 ' - 다각형 스트로크 중량

예:

 < 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 >