在“src”上使用 javascript 变量时未加载 Google Maps iFrame
Posted
技术标签:
【中文标题】在“src”上使用 javascript 变量时未加载 Google Maps iFrame【英文标题】：Google Maps iFrame not loading when using javascript variables on "src" 【发布时间】：2019-05-26 12:06:18 【问题描述】：我有一个带有 javascript 的 html 文件，用于从图像中获取 exif 数据，更具体地说是 GPS 纬度和经度。
该数据被转换为谷歌地图 iFrame 可读的格式，然后显示该照片的拍摄地点...
我目前遇到的问题是使用 JavaScript 变量，这些变量包含 iFrame 的“src”上的纬度和经度值。
如果我使用源上的特定值，iFrame 会在该特定位置正确加载...但如果我将它们替换为具有相同确切值的变量，则不会加载任何内容...iFrame 保持空白。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EXIF</title>
<style>
img
width: 500px;
max-height: auto;
</style>
</head>
<body>
<img src="https://c1.staticflickr.com/5/4867/30883801817_bf122bc498_o.jpg" id="img1" />
<iframe id="mapa_google" src="" ></iframe>
<h1>Latitude Exif</h1>
<p id="local_lat"></p>
<h1>Longitude Exif</h1>
<p id="local_lon"></p>
<h1>Latitude Final</h1>
<p id="local_lat_final"></p>
<h1>Longitude Final</h1>
<p id="local_lon_final"></p>
<script src="exif.js"></script>
<script>
var toDecimal = function (number)
var d = Math.floor(number[0]);
var m = Math.floor(number[1]);
var s = ((number[1]%1)*60);
var dms= d+(m/60)+(s/3600);
return dms
;
window.onload=getExif;
function getExif()
img1 = document.getElementById("img1");
EXIF.getData(img1, function()
latitude = EXIF.getTag(this, "GPSLatitude");
longitude = EXIF.getTag(this, "GPSLongitude");
local_lat = document.getElementById("local_lat");
local_lon = document.getElementById("local_lon");
local_lat.innerHTML = `$latitude`;
local_lon.innerHTML = `$longitude`;
latitude_final = toDecimal(latitude);
local_lat_final = document.getElementById("local_lat_final");
local_lat_final.innerHTML = `$latitude_final`;
longitude_final = toDecimal(longitude);
local_lon_final = document.getElementById("local_lon_final");
local_lon_final.innerHTML = `$longitude_final`;
);
getExif();
document.getElementById("mapa_google").src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyDQSbRMCIv1gDsT2qRsY8HvLyZP11hte_Y&q="+latitude_final+"+"+longitude_final;
/* IF I USE THE CODE BELOW WITH THE SPECIFIC LATITUDE AND LONGITUDE, THE iFrame works perfectly but id I use the one above, with the variables that contain those same values, nothing loads on that iFrame... it stays blank*/
document.getElementById("mapa_google").src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyDQSbRMCIv1gDsT2qRsY8HvLyZP11hte_Y&q=41.38448666666667+2.1066883333333335";
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：getExif() 函数是异步的。一旦图像加载完毕，您需要在回调函数中使用<img> 的异步加载结果。
function getExif()
img1 = document.getElementById("img1");
EXIF.getData(img1, function()
latitude = EXIF.getTag(this, "GPSLatitude");
longitude = EXIF.getTag(this, "GPSLongitude");
local_lat = document.getElementById("local_lat");
local_lon = document.getElementById("local_lon");
local_lat.innerHTML = `$latitude`;
local_lon.innerHTML = `$longitude`;
latitude_final = toDecimal(latitude);
local_lat_final = document.getElementById("local_lat_final");
local_lat_final.innerHTML = `$latitude_final`;
longitude_final = toDecimal(longitude);
local_lon_final = document.getElementById("local_lon_final");
local_lon_final.innerHTML = `$longitude_final`;
document.getElementById("mapa_google").src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyDQSbRMCIv1gDsT2qRsY8HvLyZP11hte_Y&q=" + latitude_final + "+" + longitude_final;
);
proof of concept fiddle
代码 sn-p：
img
width: 500px;
max-height: auto;
<script src="https://cdn.jsdelivr.net/gh/exif-js/exif-js@2.3.0/exif.js"></script>
<img src="https://c1.staticflickr.com/5/4867/30883801817_bf122bc498_o.jpg" id="img1" onload="getExif();" />
<iframe id="mapa_google" src="" ></iframe>
<h1>Latitude Exif</h1>
<p id="local_lat"></p>
<h1>Longitude Exif</h1>
<p id="local_lon"></p>
<h1>Latitude Final</h1>
<p id="local_lat_final"></p>
<h1>Longitude Final</h1>
<p id="local_lon_final"></p>
<script>
var toDecimal = function(number)
var d = Math.floor(number[0]);
var m = Math.floor(number[1]);
var s = ((number[1] % 1) * 60);
var dms = d + (m / 60) + (s / 3600);
return dms
;
// window.onload = getExif;
function getExif()
img1 = document.getElementById("img1");
EXIF.getData(img1, function()
latitude = EXIF.getTag(this, "GPSLatitude");
longitude = EXIF.getTag(this, "GPSLongitude");
local_lat = document.getElementById("local_lat");
local_lon = document.getElementById("local_lon");
local_lat.innerHTML = `$latitude`;
local_lon.innerHTML = `$longitude`;
latitude_final = toDecimal(latitude);
local_lat_final = document.getElementById("local_lat_final");
local_lat_final.innerHTML = `$latitude_final`;
longitude_final = toDecimal(longitude);
local_lon_final = document.getElementById("local_lon_final");
local_lon_final.innerHTML = `$longitude_final`;
document.getElementById("mapa_google").src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyDQSbRMCIv1gDsT2qRsY8HvLyZP11hte_Y&q=" + latitude_final + "+" + longitude_final;
);
// getExif();
</script>【讨论】：
以上是关于在“src”上使用 javascript 变量时未加载 Google Maps iFrame的主要内容，如果未能解决你的问题，请参考以下文章
删除“text/javascript”属性时未定义 Jquery
在 create-react-app 时未创建 Src 文件夹
使用 Express 时未加载 Javascript (Angular)