指定された2点間の徒歩ルート、距離、所要時間に加え、ルート上の標高グラフを表示します。
<style>
.mapContainer {
width: 100%;
height: 550px;
}
@media (max-width: 768px) {
.mapContainer {
width: 100%;
height: 500px;
}
}
</style>
<div className="mapContainer">
<RouteElevationMap
propertyName={"現在地"}
propertyLatitude={35.6843}
propertyLongitude={139.7566}
propertyType={"house"}
spotName={"最寄り駅"}
spotLatitude={35.6812}
spotLongitude={139.7671}
spotType={"station"}
/>
</div>| 変数名 | 内容 | 必須 | 解説 |
|---|---|---|---|
| Name | 物件（施設）名 | アイコンをクリックするとポップアップで文字が現れます。 | |
| Type | 物件種別 | 戸建て：house / マンション：mansion / 土地：land 上記いずれかを指定することにより、あらかじめicon_（Type名）.pngで入れておいたアイコン画像を表示することができます。 もし画像を入れておらず、指定の画像URLも未入力の場合は、各タイプのデフォルトの画像が表示されます。
my-next-app/
└─ public/
└─ icons/
└─ icon-house.png
└─ icon-mansion.png
└─ icon-land.png | |
| Latitude | 緯度 | ● | 数値。 |
| Longitude | 経度 | ● | 数値。 |
| iconUrl | 画像URL | 独自で用意したアイコン画像を使いたい場合のファイル名。 画像はそのままの大きさで表示しますので、表示したいサイズで保存してください。 場所は上記と同様public/icons内。 | |
| style | 地図サイズ | ● | 地図の大きさ。指定しないと地図が表示されません。 |
| style | その他のスタイル | CSS変数名【デフォルト値】説明 --route-line-color【#8a5770】ルートラインの色 --route-line-width【8】ルートラインの太さ（ピクセル） --chart-stroke-color【#88773eff】標高グラフの線色（Area の枠線） --chart-fill-color【#c2b076】標高グラフの塗り色（Area の塗り） --popup-bg-color【white】ポップアップの背景色 --popup-text-color【#333】ポップアップの文字色 --popup-header-color【inherit】ポップアップのヘッダーの文字色 --popup-border-radius【4px】ポップアップの角の丸み --popup-padding【4px 8px】ポップアップの内側の余白 --popup-box-shadow【0 1px 2px rgba(0,0,0,0.1)】ポップアップの影 --popup-border【none】ポップアップの枠線（例: '1px solid black'）--popup-font-family【sans-serif】ポップアップのフォント --popup-font-size【14px】ポップアップのヘッダーのフォントサイズ --popup-font-weight【bold】ポップアップのヘッダーのフォントの太さ |