ヤフーJavaScriptマップAPIで現在地を表示する


ヤフーJavaScriptマップAPIで現在地を表示する。

やりたかったこと。

  • ヤフーマップの表示。
  • ヤフーマップの中で現在地の表示。

ヤフーマップを表示するJavaScript、ヤフーマップAPIの情報、Y.Map、Y.Marker、Y.LatLngの使用法について。
https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

navigator.geolocationでGeolocation APIが可能かどうかの判定など、このサイトに一通り書いてある
https://syncer.jp/how-to-use-geolocation-api

navigator.geolocation.watchPositionで位置情報の取得。
https://developer.mozilla.org/ja/docs/Web/API/Geolocation/watchPosition

現在地の取得と使い方。coords.latitude、coords.longitudeについて。
https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation


<script>
var ymap = new Y.Map("yahoomap");

  function geoFindMe() {
    //現在地変数
    var marker_now = null;

    //現在地用人間マーカー(好きな画像を仕込んでおく)
    var icon = new Y.Icon('human.png');

    //エラー表示
    var erroroutput = document.getElementById("errorout");
    erroroutput.innerHTML = "";

    //Geolocation APIが利用できるかを判定
    if (navigator.geolocation) {

      //現在の位置情報を定期的に取得
      navigator.geolocation.watchPosition(

        //位置情報の取得に成功した場合の処理
        function(pos) {
          //現在地用マーカーがnullでないなら削除
          if( marker_now !== null ){
           //ymapはnew Y.Map("yahoomap");で宣言された変数
           ymap.removeFeature(marker_now);
           erroroutput.innerHTML = "";
          }

          //現在地用マーカーの場所決めからポップアップ
     //Y.Markerはマーカー表示。Y.LatLngは現在地。
          marker_now = new Y.Marker(new Y.LatLng(pos.coords.latitude, pos.coords.longitude), {icon: icon});
     //現在地が表示される
          ymap.addFeature(marker_now);
          marker_now.bindInfoWindow('現在地');
        },
        //位置情報の取得に失敗した場合の処理
        function() {
          erroroutput.innerHTML = "位置情報を取得できませんでした";
        },
        //位置取得の動作オプションを設定
        {
          enableHighAccuracy: false,
          timeout : 10000,
          maximumAge : 0
        }
      );
    } else {
      erroroutput.innerHTML = "Geolocation APIに対応してません";
    }
  } 
</script>

現在地ボタンgeoFindMe()がクリックされて、地図が範囲内だったら表示される。

コメントを残す

メールアドレスが公開されることはありません。

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください