时间戳

首页 > 解决方案 > EXIF.js 的“initMap 不是函数”不起作用

javascript - EXIF.js 的“initMap 不是函数”不起作用

问题描述

我知道这已经被问过很多次了，但我似乎无法为我的案例找到答案。有些东西我没有看到，我提前道歉。我的任务是创建一个图像库，当我单击其中一个时，图像会变大，并在其旁边显示 EXIF 数据和拍摄照片的位置。

我已经提取了所有内容，只是位置没有显示，并且在控制台中我不断收到消息“initMap 不是函数”，并且错误指向 HTML 中的第一行代码<!DOCTYPE html>

我曾尝试<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMap"" async="false"></script>在 HTML 中移动该位置....没有成功。更改async="false"- > async="defer"。callback=initMap按照先前提出的问题之一中的建议从谷歌链接中删除。

尝试在 .js 文件中的代码之后和之前调用该函数。我确定我错过了一些非常基本的东西，只是似乎找不到它。

<div id="imageContainer"></div>
 <div>
   <div id="myModal" class="modal">
     <img id="current" class="modal-content" >
     <span class="close">&times;</span>
     <pre id="exifResult"></pre>
     <div id="map"></div>
  </div>


let $modal = $('.modal')
let $img = $("#imageContainer img");

$img.click(function(){
$('.modal-content').attr('src', $(this).attr('src'));
$modal.css('display', 'block')
var imgCurrent = document.getElementById('current');

EXIF.getData(imgCurrent,function(){
    let result = $('#exifResult')
    let make = EXIF.getAllTags(this);

    let exifData = Object.entries(make).map(([property, value]) => {
        return `${property}: ${value}`;
    })
    result.text(exifData.join('\n'));

  let latDegree = this.exifdata.GPSLatitude[0].numerator;
  let latMinute = this.exifdata.GPSLatitude[1].numerator;
  let latSecond = this.exifdata.GPSLatitude[2].numerator;
  let latDirection = this.exifdata.GPSLatitudeRef;
  let latFinal = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);

  let lonDegree = this.exifdata.GPSLongitude[0].numerator;
  let lonMinute = this.exifdata.GPSLongitude[1].numerator;
  let lonSecond = this.exifdata.GPSLongitude[2].numerator;
  let lonDirection = this.exifdata.GPSLongitudeRef;
  let lonFinal = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);


  function initMap() {
     var mapOptions = {
        center: {lat: latFinal, lng: lonFinal},
        zoom: 8
     }
     map = new google.maps.Map(document.getElementById('map'), {
         mapOptions
      });
  }
});


  function ConvertDMSToDD(degrees, minutes, seconds, direction) {
    var dd = degrees + (minutes/60) + (seconds/3600);
    if (direction == "S" || direction == "W") {
        dd = dd * -1; 
      }
      return dd;
  }
})

标签： javascript

解决方案

我通过将initMap()函数设为全局并使用

If(statement){ initMap() }

在EXIF.getData()函数中。

$img.click(function() {
$('.modal-content').attr('src', $(this).attr('src'));
$modal.css('display', 'block');;
const imgCurrent = document.getElementById('current');

EXIF.getData(imgCurrent, function() {
    const result = $('#exifResult')
    const make = EXIF.getAllTags(this);

    let exifData = Object.entries(make).map(([property, value]) => {
        return `${property}: ${value}`;
    })
    result.text(exifData.join('\n'));

    let latFinal;
    if (imgCurrent.exifdata.GPSLatitude && imgCurrent.exifdata.GPSLatitude.length > 0) {
        const latDegree = imgCurrent.exifdata.GPSLatitude[0].numerator;
        const latMinute = imgCurrent.exifdata.GPSLatitude[1].numerator;
        const latSecond = imgCurrent.exifdata.GPSLatitude[2].numerator;

        const latDirection = imgCurrent.exifdata.GPSLatitudeRef;
        latFinal = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);
    }

    let lonFinal;
    if (imgCurrent.exifdata.GPSLongitudeRef && imgCurrent.exifdata.GPSLongitudeRef.length > 0) {

        const lonDegree = imgCurrent.exifdata.GPSLongitude[0].numerator;
        const lonMinute = imgCurrent.exifdata.GPSLongitude[1].numerator;
        const lonSecond = imgCurrent.exifdata.GPSLongitude[2].numerator;

        const lonDirection = imgCurrent.exifdata.GPSLongitudeRef;
        lonFinal = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);
    }

    if (latFinal && lonFinal) {
        initMap(latFinal, lonFinal);
    } else {
        alert('Google Location Missing');
    }

});


function ConvertDMSToDD(degrees, minutes, seconds, direction) {
    var dd = degrees + (minutes/60) + (seconds/3600);
    if (direction == "S" || direction == "W") {
        dd = dd * -1; 
      }
      return dd;
  }
})



function initMap(lonFinal,latFinal) {
    var map = new google.maps.Map(document.getElementById('map'), {
       center: {lat: lonFinal, lng: latFinal},
       zoom: 10,
    });
}

推荐阅读