[丸池を属性によって案内が変わるやつになるやつ](http://roy.e.koeki-u.ac.jp/~c115036/cmdsmap/CMDSmap/otanisys/maruike.html) [丸池デバック用umap](https://umap.openstreetmap.fr/ja/map/umap_241617) --- #### 行程 1. cgiを使えるようにしDBを使えるようにする(**できた**) 1.プロパティを考えて反映させる 2. ある一定範囲内でGPSを取得したら表示させる。 2. わからないけどできることがわかってる 3. 属性(何回その範囲に入った)によって表示内容を変える 3. まったくわからんけどなんとかなる気がする #### 道案内 * 東西南北(言われてもわかんねーよ) * 進行方向で左右何m先です的な案内(カーナビ的なやつ) #### 次やること(next) geoJsonから緯度経度を取得する方法がわかったがどんどん上書きされるので配列かなんかにして変数に入れる **できた** 距離計算のとき↑の変数に入れた緯度経度の数だけ計算する**できた** ある一定範囲内にGPSを取得したら表示させる(popupどうしよう上と同じ方法でできそう)**できた** データベースとの連携をやる #### 問題点(注意点) geoJsonのcoordinatesが経度,緯度の順で書かれてること。Leafletは緯度,経度。このままだと距離計算がおかしくなるので修正する必要あり。 geoJsonを変更すればいいかと思ったがonEachFeatureでアイコンを打つときにずれるのでだめ →読み取り後に変更する必要がある **できた** onEachFeatureでマップ上に表示したアイコンの指定の仕方がわからん**できた** #### memo - startボタンで3回目以降クリックしてもGPS取得が始まらない →謎→**解決** - 範囲指定の方法 アイコンの緯度経度から何m(単位は要確認)を範囲とするか決める var hoge = 15 範囲を円形に設定する必要 or 直線で計算するから円形にする必要なし 次にuserの位置(緯度経度)からアイコンの位置の距離の計算をするx.distanceTo(y) if 距離 <= hoge ならコメント表示(最終的には属性で内容変更) **できた** - stopについて ブラウザでGPS取得を許可してからでないと止まらない スマフォでは正常にGPS取得が止まる