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 >