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

摘要：

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

bash 复制代码

<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: ...encodedAddress}&̲key={apiKey}
是正确的。
检查 API 密钥：确保 YOUR_API_KEY 替换为你实际的 API 密钥。
查看网络请求：使用浏览器的开发者工具（如 Chrome DevTools）查看网络请求的详细信息，包括请求头和响应体。
日志输出：在代码中添加更多的 console.log 语句，输出请求和响应的详细信息，帮助定位问题。
API 文档：查阅 API 提供方的文档，确保请求参数和格式正确。

bash 复制代码

<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>

bash 复制代码

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);
    }
  }
};