掲示板お問い合わせランダムジャンプ

Navigation
FM安曇78.75MHz内で検索

エントリーナビ

2019年01月13日
地図アプリ作成
東京へ行こうかとも思ったが雪らしい。今月どこかで行くとしても今日でなくてもいいかとやめておいた。
ボードに行くのが順当だが準備が全くできていない。そもそもやる気がいまいちだ。
さて今日も無駄に過ごすかと思ったが、気になって地図アプリを作ることにした。Google Mapsはバージョンが変わってAPIキー取り直しになるので今回はYahoo Mapにした。ずっと放置していたが昔に作ったアカウントがまだ使えるようだ。
Android版なら作ったことがあるがあえてJavaScript版。普通にスクロールする地図を置くこともできる。さすがにAR表示は無理だが使わなかったしなくても問題ない。
サイトによっては現在地を聞いてくるところもあるのだが、これを使えばカーナビもどきを作れるのではと思った。
navigator.geolocation.getCurrentPositionで現在地を取得できる。さらにマニュアルを読むとwatchPositionなんてのもある。
これでGPSからの信号を監視し続けることができるらしい。呼び出しの都度現在地を書き換えるとまさにナビそのものだ。
ナビというからには経路検索が必須だが、もちろん簡単に実装できる。プラグイン使うだけでいろいろ設定もできるのだが、RouteSearchLayerを使うことにした。
さらにローカルサーチAPIなどというのもあって、これが意外と使えることが分かった。最初キーワードを入れないと検索しないと思った。「安曇野」と入れれば安曇野に関連するお店が表示されるのだが、店名に「安曇野」と入っていないと結果に入ってこない。絞り込みにはいいのだが、できればキーワードなしで検索したい。
カセットIDを指定して対応する情報だけ取得するのかと思ったら、なくても検索出来た。正直電話帳くらいしか使えないと思っていたのでこれは大きい。ファミリーマートは独自のID持っているのでこれで一覧表示できるが、できればセブンイレブンやローソンも混ぜたい。
現在地と検索範囲を指定して検索するだけで結構引っかかった。
検索結果から地図にマーカーを設定し、クリックで現在地から経路検索して結果を表示する。画面上に表示させると結構長くてはみ出すのでテキストエリア作ってそこに表示させることにした。
検索結果からマーカーを置いた地図ができたが、ズームによっては集まって見にくかったり、表示範囲外にマーカーがあったりする。
これらを一覧表示させようとListLayerとか検討したが、いまいち使い方がわかりにくいので地図にかぶせてリスト表示させるようにした。
クリックすると対応するマーカーが地図の中心になりズームも詳細表示に変更。さらにマーカーをクリックすると現在地も入るようにズームアウトして経路表示。これはなかなか使えそうだ。
検索結果が多いのでページングもいれたが、できれば絞り込みもしたいと思っていったん削除したテキストエリアを復活させた。あとスーパーだけ、コンビニだけ、ガソリンスタンドだけとか選択できるプルダウンも追加。
自分で言うのもなんだがなぜこれ誰も作ってないんだろうと思うくらいのものが出来上がった。
さてとりあえず自分のサイトに置くのだが、https対応してないので現在地の取得はできないのだそうだ。現在地はクリックして選択という形になる。
年始に作ったところはhttpsなのでそちらにこの地図機能を追加してもいいかなと思った。
[ 投稿者:りっく at 10:10 | りっくの日記 | コメント(0) | トラックバック(0) ]