要实现在网页上输入一个地址，点击按钮获取经纬度的功能，你可以使用HTML、JavaScript和一个地理编码服务（如Google Maps Geocoding API）。以下是一个简单的示例实现：

  1. HTML部分
    用于创建输入框和按钮：
<!DOCTYPE html>
<html>
<head>
    <title>地址转换经纬度</title>
</head>
<body>
    <input type="text" id="addressInput" placeholder="请输入地址">
    <button onclick="getCoordinates()">获取经纬度</button>
    <p id="result"></p>

    <!-- 加载JavaScript脚本 -->
    <script src="script.js"></script>
</body>
</html>
  1. JavaScript部分
    这部分代码将使用Google Maps Geocoding API来查找地址的经纬度。请确保你有一个有效的API密钥。
// script.js
async function getCoordinates() {
    const address = document.getElementById('addressInput').value;
    const apiKey = 'YOUR_GOOGLE_MAPS_API_KEY'; // 替换为你的API密钥
    const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=${apiKey}`;

    try {
        const response = await fetch(url);
        const data = await response.json();
        if (data.status === 'OK') {
            const lat = data.results[0].geometry.location.lat;
            const lng = data.results[0].geometry.location.lng;
            document.getElementById('result').innerText = `经度: ${lat}, 纬度: ${lng}`;
        } else {
            document.getElementById('result').innerText = '无法获取经纬度';
        }
    } catch (error) {
        console.error('获取经纬度出错', error);
        document.getElementById('result').innerText = '获取经纬度出错';
    }
}

注意事项：
确保你有一个有效的Google Maps API密钥，并且已经启用了Geocoding API。
对于真实应用，不要在前端代码中直接暴露API密钥。通常这是通过服务器端代码来管理的，以保证安全。
这是一个基础的示例，对于生产级别的应用，你可能需要考虑更多的错误处理和用户体验改善。
通过这个简单的示例，用户可以在网页上输入地址，点击按钮后，网页会显示该地址对应的经纬度。

版权属于：泽泽社长
本文链接：https://blog.zezeshe.com/archives/pop-up.html
本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！