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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Maps</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css"/>
<link rel="shortcut icon" href="favicon.ico"/>
<script type="text/javascript">
function printpage()
{
window.print();
}
function showbar(){
document.getElementById('commands').style.display='inline';
}
function hidebar(){
document.getElementById('commands').style.display='none';
}
</script>
</head>
<body onload="GetMap()">
<div id="splashscreen"></div>
<div id="mapDiv" style="" oncontextmenu="showbar();return false;" onclick="hidebar()"></div>
<div class="commands" id="commands">
<ul class="commands-list place-left">
<li>
<a class="command" onclick="document.location.reload()">
<img src="img/reload.png" alt="Refresh"/>
<span>Refresh</span>
</a>
</li>
<li>
<a class="command" onclick="printpage();hidebar();">
<img src="img/print.png" alt="Print"/>
<span>Print</span>
</a>
</li>
</ul>
</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 = "AlGKiCV2-DPhuwAoWfDfBPLg4VEnsHDLkrLWbNmsAXJ5c6KEVPgubMg47GeGkHDt";
// 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>
|
