项目中有个需求：需要在图片上传时获取图片的地理位置信息
思路分析
1.先通过exif-js获取图片的经纬度；
2.将获取到的经纬度使用逆地理编码转化成真实地址
准备工作
1.查阅exif-js官网文档
2.申请高德地图key（类型必须为Web服务API）
代码使用
1.安装exif-js包
npm install exif-js
2.vue页面代码
<template>
<div>
<img src="../../../assets/img/demo.jpg" style="width:300px;height:300px" ref="img">
<button @click="getImgLocation">获取图片位置</button>
<p>{{address}}</p>
</div>
</template>
<script>
import EXIF from 'exif-js'
import axios from 'axios'
export default {
name: "exif-js",
data(){
return {
address:''
}
},
methods:{
getImgLocation(){
let _this = this
EXIF.getData(this.$refs.img,function(){
//图片包含的所有信息(例：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。)
const imgAllInfo = EXIF.getAllTags(this);
const imgLon = EXIF.getTag(this, 'GPSLongitude')
const imgLat = EXIF.getTag(this, 'GPSLatitude')
if(imgLon && imgLat){
//计算出经纬度并保留6为小数
const lon = (imgLon[0] + imgLon[1]/60 + imgLon[2]/60/60).toFixed(6)
const lat = (imgLat[0] + imgLat[1]/60 + imgLat[2]/60/60).toFixed(6)
//使用高德地图的逆地理编码，key申请类型为Web API服务
const mapKey = '自己申请的key值'
//调用高得API
axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=${mapKey}&location=${lon},${lat}`).then(res=>{
_this.address = res.data.regeocode.formatted_address
})
} else {
_this.address = '暂未获得该图片地址'
}
})
}
}
}
</script>
<style scoped>
</style>
运行结果
