根据输入的详细地址解析经纬度

在这里插入图片描述

摘要：

今天遇到一个需求：就是做客户导入的时候因为导入的客户地址的时候没有经纬度的，但是同步的时候需要经纬度的，所以还是要根据客户提供的详细地址解析出来对应的经纬度！回填到对应的经纬度的表单之中进行客户的同步功能！

在这里插入图片描述

<template><div><el-input v-model="formData.detailAddress" placeholder="请输入详细地址" @input="fetchCoordinates" /><p>经度: {{ coordinates.lng }}</p><p>纬度: {{ coordinates.lat }}</p></div>
</template><script lang="ts">
import { ref, reactive } from 'vue';export default {setup() {const formData = reactive({detailAddress: ''});const coordinates = reactive({lng: '',lat: ''});const fetchCoordinates = async () => {if (formData.detailAddress) {try {const encodedAddress = encodeURIComponent(formData.detailAddress);const apiKey = 'YOUR_API_KEY'; // 替换为你的 API 密钥const response = await fetch(`https://api.map.com/geocode/json?address=${encodedAddress}&key=${apiKey}`);//const response = await fetch(`https://restapi.amap.com/v3/geocode/geo?key=${apiKey}&address=${encodedAddress}`);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.json();console.log('Response data:', data); // 输出响应数据if (data.status === 'OK') {coordinates.lng = data.results[0].geometry.location.lng;coordinates.lat = data.results[0].geometry.location.lat;} else {console.error('地理编码失败', data);}} catch (error) {console.error('请求失败', error);}}};return {formData,coordinates,fetchCoordinates};}
};
</script>

代码功能解释
模板部分:

使用 el-input 组件绑定 formData.detailAddress，并设置 @input 事件监听器，当用户输入地址时调用
fetchCoordinates 方法。显示解析后的经纬度。

脚本部分:

使用 reactive 创建响应式对象 formData 和 coordinates。
定义 fetchCoordinates 方法，该方法在用户输入地址时被调用。
在 fetchCoordinates 方法中，检查 formData.detailAddress 是否有值，如果有值则发起地理编码请求。
添加了对 response.ok 的检查，确保请求成功后再解析 JSON 数据。
请求成功后，解析返回的 JSON 数据，提取经纬度并更新 coordinates 对象。
如果请求失败或地理编码失败，记录详细的错误信息。
添加了 console.log 语句，输出响应数据，帮助调试。

控制流图:

在这里插入图片描述
详细解释

A[用户输入详细地址]: 用户在输入框中输入详细地址。
B[调用 fetchCoordinates 方法]: 输入框的 @input 事件触发，调用 fetchCoordinates 方法。
C{地址是否为空?}: 检查 formData.detailAddress 是否为空。
D[结束]: 如果地址为空，结束流程。
E[发起地理编码请求]: 发起地理编码请求。
F{请求是否成功?}: 检查请求是否成功。
G[记录请求失败错误]: 如果请求失败，记录错误信息。
H[解析返回数据]: 解析返回的 JSON 数据。
I{解析是否成功?}: 检查解析是否成功。
J[记录解析失败错误]: 如果解析失败，记录错误信息。
K[更新经纬度]: 更新 coordinates 对象中的经纬度。
L[显示经纬度]: 在页面上显示解析后的经纬度。

调试建议:

检查 API 地址：确保
https://api.map.com/geocode/json?address= $KaTeX parse error: Expected 'EOF', got '&' at position 17: \dotsencodedAddress}&̲key=$ {apiKey}
是正确的。
检查 API 密钥：确保 YOUR_API_KEY 替换为你实际的 API 密钥。
查看网络请求：使用浏览器的开发者工具（如 Chrome DevTools）查看网络请求的详细信息，包括请求头和响应体。
日志输出：在代码中添加更多的 console.log 语句，输出请求和响应的详细信息，帮助定位问题。
API 文档：查阅 API 提供方的文档，确保请求参数和格式正确。

<el-form-item label="详细地址" prop="detailAddress" label-width="120px"><el-input v-model="formData.detailAddress" placeholder="请输入详细地址" @input="fetchCoordinates" />
</el-form-item>
<el-form-item label="坐标" prop="splon" label-width="120px"><el-input disabled oninput="value = value.replace(/[^0-9.-]/g,'')" v-model="formData.splon" class="!w-115px !mr-2px" clearable placeholder="请选择经度" /><el-input disabled oninput="value = value.replace(/[^0-9.-]/g,'')" v-model="formData.splat" class="!w-115px" clearable placeholder="请选择纬度" /><el-button text type="primary" size="small" @click="openChooseMap">选择坐标</el-button>
</el-form-item>

const fetchCoordinates = async () => {if (formData.value.detailAddress) {try {const encodedAddress = encodeURIComponent(formData.value.detailAddress);const apiKey = 'YOUR_API_KEY';const response = await fetch(`https://restapi.amap.com/v3/geocode/geo?key=${apiKey}&address=${encodedAddress}`);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.json();console.log('Response data:', data); // 输出响应数据if (data.status == '1' || data.statusCode == 200) {const location = data.geocodes[0].location;formData.value.splon = location.split(',')[0];formData.value.splat = location.split(',')[1];} else {// console.error('解析地址失败：', data);}} catch (error) {console.error('请求失败', error);}}
};