在“src”上使用 javascript 变量时未加载 Google Maps iFrame答案

【问题标题】：Google Maps iFrame not loading when using javascript variables on "src"在“src”上使用 javascript 变量时未加载 Google Maps iFrame
【发布时间】：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="" width="640" height="480"></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>

【问题讨论】：

标签： javascript html google-maps iframe

【解决方案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="" width="640" height="480"></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>

【讨论】：