Google Maps iFrame не загружается при использовании переменных javascript на "src" - PullRequest
Новая
       2

Google Maps iFrame не загружается при использовании переменных javascript на "src"

0 голосов
/ 28 декабря 2018

У меня есть html-файл с javascript, который используется для получения exif-данных из изображения, в частности, широты и долготы GPS.

Эти данные преобразуются в формат, который можно прочитать с помощью iFrame в Картах Google, чтобы затем показать, где была сделана эта фотография ...

Проблема, с которой я столкнулся на данный момент, заключается в использованиипеременных JavaScript, которые содержат значения широты и долготы в «src» iFrame.

Если я использую конкретные значения в источнике, 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>

1 Ответ

0 голосов
/ 28 декабря 2018

Функция 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;

});

подтверждение концепции скрипта

фрагмент кода: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...