JS实现根据详细地址获取经纬度功能示例

2023年5月28日上午10:56 • JavaScript

实现根据详细地址获取经纬度功能的过程中，可以按照以下步骤进行操作：

第一步：引入百度地图API

在文档的头部中引入百度地图API的js文件。例如，在html文件中可以通过以下代码引入库文件：

<script src="http://api.map.baidu.com/api?v=2.0&ak=your-appkey"></script>

其中your-appkey需要替换为你自己的百度地图应用程序密钥。

第二步：定义获取函数

定义一个js函数，该函数接受一个完整的地址作为参数，该函数将返回一个经纬度值。

function getLngLatByAddress(address) {
    var geocoder = new BMap.Geocoder(); // 创建一个地址解析器对象
    geocoder.getPoint(address, function(point) { // 根据地址解析器对象，获取地址解析结果
        return point;
    });
}

在代码中，首先创建了一个地址解析器对象： var geocoder = new BMap.Geocoder();

其次，使用geocoder.getPoint()方法对用户输入的地址进行解析获取经纬度点，此方法中，第一个参数为地址字符串，第二个参数为解析成功后回调的function函数，函数中的point返回为Point类型的值。

第三步：代码应用

将该函数封装到代码中，以实现完整的功能。例如，下面的代码以一个经典的html表单为例，当用户输入地址并点击按钮时，将显示地址的经度和纬度。

<!DOCTYPE html>
<html>
<head>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=your-appkey"></script>
</head>
<body>
    <form>
        <input type="text" id="address" placeholder="请输入地址" required>
        <button type="submit" onclick="showLngLatByAddress()">获取经纬度</button>
    </form>
    <div id="result"></div>
    <script>
        function showLngLatByAddress() {
            var address = document.getElementById('address').value.trim();
            var geocoder = new BMap.Geocoder();
            geocoder.getPoint(address, function(point) {
                var resultDiv = document.getElementById('result');
                if (point) {
                    resultDiv.innerHTML = '该地址的经度为：' + point.lng + '，纬度为：' + point.lat;
                } else {
                    resultDiv.innerHTML = '没有找到该地址对应的经纬度，请确认输入的地址是否正确！';
                }
            });
        }
    </script>
</body>
</html>

在该示例中，当用户输入地址并点击按钮时，将获取该地址的经度和纬度，并将结果显示在位于表单下方的div元素中。

示例2：

除此之外，您可以进一步扩展该示例的功能，实现批量获取地址的经纬度，例如如下示例代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=your-appkey"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <h2>批量获取地址的经纬度</h2>
    <textarea id="addr-list" rows="5"></textarea>
    <button id="btn-get-lng-lats" type="button">获取经纬度</button>
    <div id="result"></div>
    <script>
        $(document).ready(function() {
            $('#btn-get-lng-lats').on('click', function() {
                var addrQueue = $('#addr-list').val().trim().split('\n');
                var geocoder = new BMap.Geocoder();
                var resultDiv = $('#result');
                resultDiv.html('');
                addrQueue.forEach(function(address) {
                    geocoder.getPoint(address.trim(), function(point) {
                        if (point) {
                            resultDiv.append('<p>' + address + ' 经度：' + point.lng + ' 纬度：' + point.lat + '</p>');
                        } else {
                            resultDiv.append('<p>' + address + ' 地址无法解析！</p>');
                        }
                    });
                });
            });
        });
    </script>
</body>
</html>

在该示例中，您可以输入多行地址，每行表示一个地址，然后单击按钮即可同时获取这些地址的经度和纬度，然后将结果以列表的形式呈现出来。

希望以上攻略对您有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现根据详细地址获取经纬度功能示例 - Python技术站