-
Notifications
You must be signed in to change notification settings - Fork 0
/
geolocation3.html
86 lines (86 loc) · 3.65 KB
/
geolocation3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!doctype html>
<html lang="en">
<head>
<title>Geolocation demo</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Geolocation demo</h1>
<p>
Find out approximately where you are.
</p>
<p>
Step 1: <button onclick="GetMap()">Show map</button>
</p>
<p>
Step 2: When prompted, allow your location to be shared to see Geolocation in action
</p>
<div id="mapDiv" style="position: relative; width: 800px; height: 600px;"></div>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap() {
/* Replace YOUR_BING_MAPS_KEY with your own credentials.
Obtain a key by signing up for a developer account at
http://www.microsoft.com/maps/developers/ */
var cred = "YOUR_BING_MAPS_KEY";
// Initialize map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{ credentials: cred });
// Check if browser supports geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);
}
else {
alert('I\'m sorry, but Geolocation is not supported in your current browser. Have you tried running this demo in IE9?');
}
}
// Successful geolocation
function locateSuccess(loc) {
// Set the user's location
var userLocation = new Microsoft.Maps.Location(loc.coords.latitude, loc.coords.longitude);
// Zoom in on user's location on map
map.setView({ center: userLocation, zoom: 17 });
// Draw circle of area where user is located
var locationArea = drawCircle(userLocation);
map.entities.push(locationArea);
}
// Unsuccessful geolocation
function locateFail(geoPositionError) {
switch (geoPositionError.code) {
case 0: // UNKNOWN_ERROR
alert('An unknown error occurred, sorry');
break;
case 1: // PERMISSION_DENIED
alert('Permission to use Geolocation was denied');
break;
case 2: // POSITION_UNAVAILABLE
alert('Couldn\'t find you...');
break;
case 3: // TIMEOUT
alert('The Geolocation request took too long and timed out');
break;
default:
}
}
// Draw blue circle on top of user's location
function drawCircle(loc) {
var radius = 100;
var R = 6378137;
var lat = (loc.latitude * Math.PI) / 180;
var lon = (loc.longitude * Math.PI) / 180;
var d = parseFloat(radius) / R;
var locs = new Array();
for (x = 0; x <= 360; x++) {
var p = new Microsoft.Maps.Location();
brng = x * Math.PI / 180;
p.latitude = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(brng));
p.longitude = ((lon + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat), Math.cos(d) - Math.sin(lat) * Math.sin(p.latitude))) * 180) / Math.PI;
p.latitude = (p.latitude * 180) / Math.PI;
locs.push(p);
}
return new Microsoft.Maps.Polygon(locs, { fillColor: new Microsoft.Maps.Color(125, 0, 0, 255), strokeColor: new Microsoft.Maps.Color(0, 0, 0, 255) });
}
</script>
</body>
</html>