本日の課題

着手 3日以内

宛先 ゲームデザインII グループ 第5回課題提出板

問題

  1. 前回の課題のマーカアイコンを自作アイコンに変更せよ。

  2. あらかじめゴール地点を設定しておき、位置情報追跡を開始し現在位置が ゴールの25m以内に近づくと「ゴール!」それ以外のときは「あと何m」 と表示される機能を追加せよ。

ヒント

2番のヒントを記す。

  1. あらかじめゴール地点を
    var goal = L.latLng([緯度, 経度])
    のように設定しておく。
  2. function onSuccess 内で得た衛星信号からの現在位置 latlng と goal の距離を latlng.distanceTo(goal) で計算する(d = latlng.distanceTo(goal))。
  3. d が 25m より小さければ「ゴール」、そうでなければ距離表示をする。 これには、表示すべき場所をHTMLソース内の p 要素などで作成しておき、 document.getElementById(そのp要素のID).innerHTML に表示すべき文字列を設定する。

概略をまとめると以下のような流れとなる。

var goal = L.latlng(緯度, 経度);
  :
  :
function onSuccess(pos) {
  var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
  var d = latlng.distanceTo(goal)
  var info = document.getElementById("info");
  if (d < 25) {
    info.innerHTML = "大当たり!";
  } else {
    info.innerHTML = "あと " + d + "m です";
  }
}

作成場所

外部公開httpsサーバ https://www.koeki-prj.org/ でアクセスできる設定にしてある。つまり、 ~/public_html/map/App/ にファイルを作ると

https://www.koeki-prj.org/~c11yxxx/map/App/

のURLでアクセスできる状態になっている。

本日の目次
yuuji@e.koeki-u.ac.jp