This repository has been archived by the owner on Aug 5, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
/
sample.html
70 lines (60 loc) · 1.75 KB
/
sample.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="exif.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var $map, $info;
window.onload = function () {
var $filer = document.querySelector("input[type=file]");
$map = document.getElementById("map");
$info = document.getElementById("info");
$filer.onchange = upload;
};
function upload(e) {
var file = e.target.files[0];
var reader = new FileReader;
reader.onload = function () {
var gps, f, lat, lng;
try {
gps = Exif.loadFromArrayBuffer(reader.result).gpsifd;
if (typeof gps === "undefined") {
throw "GPS data is unavailable.";
} else {
f = function (b, a) { return a + b / 60; };
lat = gps.latitude.reduceRight(f) * (gps.latitudeRef.indexOf("N") >= 0 ? 1 : -1); //Latitude
lng = gps.longitude.reduceRight(f) * (gps.longitudeRef.indexOf("E") >= 0 ? 1 : -1); //Longitude
showMap(lat, lng);
}
} catch (e) {
alert(e);
}
};
reader.readAsArrayBuffer(file);
}
function showMap(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom : 15,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($map, mapOptions);
var markerOptions = {
position : latlng,
map : map,
title : "here"
};
var marker = new google.maps.Marker(markerOptions);
$info.innerHTML = "Latitude:" + lat + "<br>Longitude:" + lng;
}
</script>
<title>exif.js</title>
</head>
<body>
*.jpg<input type="file" />
<div id="map" style="width : 480px; height : 360px;"></div>
<div id="info"></div>
</body>
</html>