lit google mapダウンロード-Lit lit google mapソースコードダウンロード

lit google map

その他のソースコード

1.0.0

ダウンロード

点灯グーグルマップ

このプロジェクトは、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マップ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マップAPIキー
「言語」 - グーグルマップ言語（オプション）
' Map -id ' -Google MAP MAPID（オプション）
'バージョン' -GoogleマップJSスクリプトバージョンをロードする（デフォルト： '3.48'）
「スタイル」 - JSON形式のマップスタイル（オプション）
「ズーム」 - ズームレベル（デフォルト： '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 >

マーカーには、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）
' 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 >

ポリゴン形状要素属性

「パス」 - ポリゴンパスは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 >