<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Geocoding &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/geocoding/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Fri, 06 Dec 2013 01:42:39 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>&#034;Geolocation&#034; &#8211; Alphabetical Advent Calendar 2013</title>
		<link>https://blog.mach3.jp/2013/12/06/jaac2013-g-geolocation.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Fri, 06 Dec 2013 01:42:39 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[Advent Calendar 2013]]></category>
		<category><![CDATA[Geocoding]]></category>
		<category><![CDATA[Geolocation]]></category>
		<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=3661</guid>

					<description><![CDATA[&#8220;G&#8221; は Geolocation の &#8220;G&#8221;。 Geolocation Geolocation は、ユーザーの現在位置を調べる為のオブジェクトです。 今では珍しくなくなっ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>&#8220;G&#8221; は Geolocation の &#8220;G&#8221;。</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh3.googleusercontent.com/-BaGPp_QyP1U/UqR4hFTq1BI/AAAAAAAACYg/kCdMgCW170k/s400/ac2013-g.png" alt="G"/></figure>



<p></p>



<span id="more-3661"></span>



<h2 class="wp-block-heading">Geolocation</h2>



<p>Geolocation は、ユーザーの現在位置を調べる為のオブジェクトです。 今では珍しくなくなってきた現在位置を利用したアプリケーションやゲームなどに利用する事ができます。 使用は非常に簡単で、navigator に生えている <strong>geolocation</strong> を参照するだけです。 navigator を調べればサポートしているかどうかがすぐ調べられますね。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> supportGeolocation = <span class="hljs-string">"geolocation"</span> <span class="hljs-keyword">in</span> navigator;
</code></span></pre>


<p>勿論位置情報がダダ漏れなのは色々と問題がある為、geolocation の機能を使用しようとすると</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>「example.com に位置情報の共有を許可しますか？」</p>
</blockquote>



<p>のようなダイアログが出るようになっています。 許可しなかった場合は位置情報を取得する事ができません。</p>



<p>位置情報の取得は <strong>getCurrentPosition()</strong> を使って行います。 引数には、返された <strong>geoposition</strong> オブジェクトを受け取る為のコールバック関数を渡します。 コールバックには位置情報を格納した <strong>geoposition</strong> オブジェクトが渡されます。 geoposition.coords に緯度経度等の情報が入っているのでそれを参照して使用しましょう。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">navigator.geolocation.getCurrentPosition(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">pos</span>)</span>{
    pos.coords.latitude; <span class="hljs-comment">// 緯度</span>
    pos.coords.longitude; <span class="hljs-comment">// 経度</span>
});
</code></span></pre>


<p>また、getCurrentPosition には第二引数としてエラー時のコールバック関数、第三引数としてオプションが渡せます。 オプションには <strong>enableHighAccuracy</strong> 、<strong>timeout</strong>、 <strong>maximumAge</strong> が使え、 timeout の時間内に位置情報が取得できなかった場合は「失敗」とされ、エラー時のコールバックが呼ばれます。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">navigator.geolocation.getCurrentPosition(
    <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">/* 成功時の処理 */</span> },
    <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">/* 失敗時の処理 */</span> },
    {
        <span class="hljs-attr">enableHighAccuracy</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// より精度の高い位置情報を得るかどうか</span>
        <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>, <span class="hljs-comment">// 位置情報を取得するまでのタイムアウト</span>
        <span class="hljs-attr">maximumAge</span>: <span class="hljs-number">0</span> <span class="hljs-comment">// 位置情報のキャッシュの寿命</span>
    }
);
</code></span></pre>


<h2 class="wp-block-heading">ジオコーディングを利用する</h2>



<p><strong>ジオコーディング</strong> というのは、例えば住所等を入力すると座標（緯度経度）等の情報を教えてくれる仕組みの事を指し、 その逆、つまり緯度経度から国や住所などを割り出す事を <strong>逆ジオコーディング</strong> と言ったりします。 <a href="https://developers.google.com/maps/?hl=ja">Google Map API</a> ではジオコーディング・逆ジオコーディング共サポートしているので、 それを利用して座標から現在地の情報を引いてみましょう。</p>



<p>Google Map APIを利用開始する手順についてはここでは省きます。 手順を踏んでAPIキーを取得した上でJavaScriptを読み込む事で <strong>google.maps.Geocoder</strong> が使用出来るようになります。</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY<span class="hljs-symbol">&amp;amp;</span>sensor=false"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></span></pre>


<p>逆ジオコーディングする為には、 <strong>Geocoder.geocode()</strong> メソッドに緯度経度の情報を渡せばOKです。 緯度経度の渡し方ですが、そのまま渡すのではなく、一度 <strong>LatLng</strong> オブジェクトにする必要があるので注意しましょう。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> geocoder = <span class="hljs-keyword">new</span> google.maps.Geocoder();
navigator.geolocation.getCurrentPosition(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">pos</span>)</span>{
    <span class="hljs-comment">// 座標から LatLng オブジェクトを生成して渡す</span>
    <span class="hljs-keyword">var</span> latlng = <span class="hljs-keyword">new</span> google.maps.LatLng(
        pos.coords.latitude,
        pos.coords.longitude
    );
    geocoder.geocode({<span class="hljs-string">"latLng"</span>: latlng}, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">results, status</span>)</span>{
        <span class="hljs-keyword">if</span>(results.length){
            <span class="hljs-keyword">var</span> result = resulsts.shift();
            <span class="hljs-built_in">console</span>.log(result.formatted_address); <span class="hljs-comment">// "日本, 神奈川県横浜市XXXXXXXXXX" など</span>
        }
    });
});
</code></span></pre>


<p>geoode() の使い方はご覧のとおりです。コールバックの第一引数には、結果のオブジェクトが精度の高い順に配列に格納されて渡されます。 <strong>formatted_addoress</strong> は文字通りフォーマットされた文字列が格納されています。 結果オブジェクトにはこの他にも住所を細かく部品に分けた <strong>address_components</strong> などが含まれているので、 国などを取得したい場合はこれが使えそうです。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">result.address_components.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">component</span>)</span>{
    <span class="hljs-keyword">if</span>(component.types.indexOf(<span class="hljs-string">"country"</span>) &gt;= <span class="hljs-number">0</span>){
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"あなたはいま"</span>, component.long_name, <span class="hljs-string">"にいるみたいです。"</span>);
    }
});
</code></span></pre>


<h2 class="wp-block-heading">参考資料</h2>



<ul class="wp-block-list">
<li><a href="http://www.w3.org/TR/geolocation-API/">Geolocation API Specification</a></li>



<li><a href="https://developer.mozilla.org/en/docs/WebAPI/Using_geolocation">Using geolocation &#8211; WebAPI | MDN</a></li>



<li><a href="https://developers.google.com/maps/documentation/javascript/geocoding?hl=ja">ジオコーディング サービス &#8211; Google Maps JavaScript API v3 — Google Developers</a></li>
</ul>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
