これは、Google マップを使用した Geo Location のチュートリアルで見つけたコードです。お役に立てば幸いです。
これは、ネットワークに接続する方法で機能します。
- 固定 IP を提供する Boradband ISP を使用すると、位置情報がより正確になります。
- モバイル デバイスを使用してインターネットに接続している場合、ネットワークが信号を取得している最寄りのモバイル タワーの場所が表示されます。
HTML5 Geolocation の例
<!DOCTYPE html>
<html>
<head>
<title>GeoLocation Demo</title>
<meta charset="utf-8"/>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script>
var startPos;
var map;
function init() {
if (navigator.geolocation) {
document.getElementById("support").innerHTML = "<p style='color:green'>Great! This browser supports HTML5 Geolocation</p>";
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, {
timeout: 50000
});
//navigator.geolocation.watchPosition(updateCurrPosition,handleLocationError);
} else {
document.getElementById("support").innerHTML = "<p style='color:red'>Oops! This browser does not support HTML5 Geolocation</p>";
}
}
function updateLocation(position) {
startPos = position;
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
//document.getElementById("startLat").innerHTML = latitude;
//document.getElementById("startLon").innerHTML = longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 10,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
}
function handleLocationError(error) {
switch (error.code) {
case 0:
updateStatus("There was an error while retrieving your location: " + error.message);
break;
case 1:
updateStatus("The user prevented this page from retrieving the location.");
break;
case 2:
updateStatus("The browser was unable to determine your location: " + error.message);
break;
case 3:
updateStatus("The browser timed out before retrieving the location.");
break;
}
}
function updateStatus(msg) {
document.getElementById("divStatus").innerHTML = msg;
}
</script>
</head>
<body onload="init()">
<div id="support"></div>
<div id="divStatus"></div>
<div id="map_canvas" style="width:600px;height:400px;"></div>
</body>
</html>