我想知道是否有人可以帮助提供一些建议，告诉我们如何在选择图像后，在选择图像时使p标签的图片信息和地图链接更新显示的信息。我需要添加或更改什么才能实现这一点。该代码运行一个基本脚本，从图像中检索exif数据(如果有(，并生成一个指向谷歌地图的链接，显示位置，并告诉用户照片拍摄的时间和时间以及在什么设备上拍摄。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EXIF</title>
</head>
<body>
<p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="output" width="200" /></p>
<br>
<p id="pic-info"></p>
<p id="map-link"></p>
<script type="text/javascript" src="exif.js"></script>
<script>
var loadFile = function(event) {
var image = document.getElementById('output');
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
<script>
document.getElementById("output").onclick = function() {
EXIF.getData(this, function() {
myData = this;
console.log(myData.exifdata);
document.getElementById('pic-info').innerHTML = 'This photo was taken on ' + myData.exifdata.DateTime + ' with a ' + myData.exifdata.Make + ' ' + myData.exifdata.Model;
// Calculate latitude decimal
var latDegree = myData.exifdata.GPSLatitude[0].numerator;
var latMinute = myData.exifdata.GPSLatitude[1].numerator;
var latSecond = myData.exifdata.GPSLatitude[2].numerator;
var latDirection = myData.exifdata.GPSLatitudeRef;
var latFinal = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);
console.log(latFinal);
// Calculate longitude decimal
var lonDegree = myData.exifdata.GPSLongitude[0].numerator;
var lonMinute = myData.exifdata.GPSLongitude[1].numerator;
var lonSecond = myData.exifdata.GPSLongitude[2].numerator;
var lonDirection = myData.exifdata.GPSLongitudeRef;
var lonFinal = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);
console.log(lonFinal);
document.getElementById('map-link').innerHTML = '<a href="http://www.google.com/maps/place/' + latFinal + ',' + lonFinal + '" target="_blank">Google Maps</a>';
});
}
function ConvertDMSToDD(degrees, minutes, seconds, direction) {
var dd = degrees + (minutes / 60) + (seconds / 3600);
if (direction == "S" || direction == "W") {
dd = dd * -1;
}
return dd;
}
</script>
</body>
</html>
我们不能停止点击处理程序，但我们可以检查"图片信息"；在点击它是否是以前的值时跳过值更新"0"；图片信息"；以及"；地图链接"；。
// code here for updation
}
<script>
document.getElementById("output").onclick = function() {
EXIF.getData(this, function() {
myData = this;
console.log(myData.exifdata);
if(document.getElementById('pic-info').innerHTML === ('This photo was taken on ' + myData.exifdata.DateTime + ' with a ' + myData.exifdata.Make + ' ' + myData.exifdata.Model) )
{
document.getElementById('pic-info').innerHTML = 'This photo was taken on ' + myData.exifdata.DateTime + ' with a ' + myData.exifdata.Make + ' ' + myData.exifdata.Model;
// Calculate latitude decimal
var latDegree = myData.exifdata.GPSLatitude[0].numerator;
var latMinute = myData.exifdata.GPSLatitude[1].numerator;
var latSecond = myData.exifdata.GPSLatitude[2].numerator;
var latDirection = myData.exifdata.GPSLatitudeRef;
var latFinal = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);
console.log(latFinal);
// Calculate longitude decimal
var lonDegree = myData.exifdata.GPSLongitude[0].numerator;
var lonMinute = myData.exifdata.GPSLongitude[1].numerator;
var lonSecond = myData.exifdata.GPSLongitude[2].numerator;
var lonDirection = myData.exifdata.GPSLongitudeRef;
var lonFinal = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);
console.log(lonFinal);
document.getElementById('map-link').innerHTML = '<a href="http://www.google.com/maps/place/' + latFinal + ',' + lonFinal + '" target="_blank">Google Maps</a>';
}
});
}
</script>