Geolocation | furoom

参考

http://www.hp-stylelink.com/news/2013/08/20130830.php

ソース

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>Geolocation Sample</title>
</head>
<body>
<script type=”text/javascript”>
if (navigator.geolocation) {
// 現在の位置情報取得を実施
navigator.geolocation.getCurrentPosition(
// 位置情報取得成功時
function (pos) {
var location =”<li>”+”緯度：” + pos.coords.latitude + “</li>”;
location += “<li>”+”経度：” + pos.coords.longitude + “</li>”;
document.getElementById(“location”).innerHTML = location;
},
// 位置情報取得失敗時
function (pos) {
var location =”<li>位置情報が取得できませんでした。</li>”;
location +=”<li>pos=” + pos + “</li>”;
console.log(pos);
document.getElementById(“location”).innerHTML = location;
});
} else {
window.alert(“本ブラウザではGeolocationが使えません”);
}
</script>
<ul id=”location”>
</ul>
</body>
</html>

デモ

https://dev.furoom.net/sandbox/geolocation/

ブラウザごとで挙動違うみたい。

Chrome

HTTPS：○

HTTP：×

次のようなエラー。

PositionError {code: 1, message: “Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).”}

Edge

HTTPS：○

HTTP：○

※Windowsの設定で、位置情報の取得を許可するアプリとして設定が必要

Firefox

HTTPS：○

HTTP：○

Android Chrome

HTTPS：○

HTTP：×

次のようなエラー。

PositionError {code: 1, message: “Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).”}

かつ、GPSを有効にしている必要がある。

していなければ、許可するかどうかのダイアログも表示されない。

Android Dolphin

HTTPS：○

HTTP：×

次のようなエラー。

PositionError {code: 1, message: “Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).”}

かつ、GPSを有効にしている必要がある。

していなければ、許可するかどうかのダイアログも表示されない。