lit google map下載 - lit google map源代碼下載

lit google map

其他源碼

1.0.0

下載

Lit-Google圖

該項目是基於LIT V2庫的Google-Map WebComponent的港口。

更新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語言（可選）
“ MAP -ID ” - Google Map MapID（可選）
“版本” - Google Map JS腳本版本（默認：'3.48'）
“樣式” - JSON格式的地圖樣式（可選）
' Zoom ' - Zoom Level（默認值：'8'）
“適合標記” - 適合顯示所有標記的地圖區域
“地圖類型” - 顯示以顯示：“路線圖”，“衛星”，“混合”，“地形”
“中心緯度” - 地圖初始中心點的緯度
“中心” - 地圖初始中心點的經度

例子：

 < 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含量的關聯的Infowdow：

 < 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）
“填充色” - 圓填充顏色
“填充 - 暢通無阻” - 圓圈填充不透明度
'卒中' - 圓圈顏色
“中風 - 寬鬆” - 圓圈不透明性
“卒中重量” - 圓圈重量

例子：

 < 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數組的形式指向
“填充色” - 多邊形填充顏色
“填充 - 暢通無阻” - 多邊形填充不透明度
“卒中顏色” - 多邊形筆劃顏色
“中風 - 寬鬆” - 多邊形中風不透明
“中風重量” - 多邊形筆

例子：

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