ヤフー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_API

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

<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>