1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

最寄り駅検索システム

Posted at

##URL
https://task202010-39020.web.app/

##システム概要
都道府県・市区町村を選択して、
町域と最寄り駅の一覧を表示する。
一覧から選択した最寄り駅の詳細(地図)を表示する。

##技術
・HTML
・pug
・CSS
・Sass
・JavaScript
・webpack
・fetchAPI
・XD
・Firebase Hosting

##地図表示ライブラリ
#####leaflet
https://leafletjs.com/

##使用API
参照元:http://geoapi.heartrails.com/
#####都道府県取得API
http://geoapi.heartrails.com/api/json?method=getPrefectures
#####市区町村取得API
http://geoapi.heartrails.com/api/json?method=getCities
#####町域取得API
http://geoapi.heartrails.com/api/json?method=getTowns
#####最寄り駅取得API
http://geoapi.heartrails.com/api/json?method=getStations

##メソッド説明
#####getListTown(prefecture,city)
都道府県と市区町村を元に町域一覧を取得
→表示項目:町域名、最寄駅

##function説明
#####searchBtnCheck()
検索ボタンをdisabledにするか判定
都道府県OR市区町村が選ばれていない場合、disabled
#####cityListCheck()
市区町村セレクトボックスをdisabledにするか判定
都道府県が選ばれていない場合、disabled
#####deleteList()
一覧を消す
#####getListPrefecture()
都道府県一覧を取得し、都道府県セレクトボックスに設定
#####getListgetListCity(prefecture)
都道府県を元に市区町村一覧を取得し、市区町村セレクトボックスに設定
#####getNearStation(postal)
郵便番号を元に最寄り駅情報を取得
#####search()
検索ボタン押下時に検索結果一覧を表示
#####detailPage(town)
詳細ページへ遷移
#####dispMap()
地図表示

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?