地址经纬度互换

最新推荐文章于 2025-05-19 12:31:59 发布
@LanCaiSheng
最新推荐文章于 2025-05-19 12:31:59 发布
阅读量119
点赞数
文章标签：前端 javascript json
本文链接：https://blog.youkuaiyun.com/qq_43173759/article/details/121991220
版权
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-2.1.3.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="width: 500px; height: 100px; border: 1px solid; float: left;">
            <span style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">地址：</span>
            <input type="text" id="address" placeholder="" style="width: 300px; height: 30px; margin: 20px 0 0 0;" />
            <input type="button" id="search_address" value="搜索" style="width: 60px; height: 30px;" />
            <br />
            <span id="lng" style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">经度：</span><br />
            <span id="lat" style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">纬度：</span>
        </div>
        <div style="width: 500px; height: 500px; border: 1px solid; float: left; margin-left: 200px;">
            <span style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">经度：</span>
            <input type="text" value="" placeholder="" id="txtlng" style="width: 300px; height: 20px; margin: 20px 0 0 0;" />
            <br />
            <span style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">纬度：</span>
            <input type="text" value="" placeholder="" id="txtlat" style="width: 300px; height: 20px; margin: 20px 0 0 0;" />
            <br />
            <input type="button" id="search_lng_lat" value="搜索" style="height: 30px; margin-top: 12px; margin-left: 220px;" /><br />
            <span id="spanadderss" style="width: 60px; margin: 12px 0 6px 20px; font-size: 14px; color: #808080;">地址：</span>
        </div>
    </form>
</body>
</html>
<script>
    $(document).ready(function () {
        $('#search_address').click(function () {
            var address = $.trim($('#address').val());
            if (address != undefined && address != '') {
                var url = 'http://api.map.baidu.com/geocoder/v2/?ak=你的AK&output=json&address=' + encodeURIComponent(address);
                //根据地点名称获取经纬度信息
                $.ajax({
                    type: "POST",
                    url: url,
                    dataType: "JSONP",
                    success: function (data) {
                        if (parseInt(data.status) == 0) {
                            $("#lng").html("经度：" + data.result.location.lng);
                            $("#lat").html("纬度：" + data.result.location.lat);
                        }
                    }
                });
            }
        });

        $('#search_lng_lat').click(function () {
            var lng = $.trim($('#txtlng').val());
            var lat = $.trim($('#txtlat').val());
            var url = 'http://api.map.baidu.com/geocoder/v2/?ak=你的AK&output=json&pois=1&location=' + lat + "," + lng;
            $.ajax({
                type: "POST",
                url: url,
                dataType: "JSONP",
                success: function (data) {
                    if (parseInt(data.status) == 0) {
                        var result = "地址：" + data.result.formatted_address + "</br>";
                        result += "省名:" + data.result.addressComponent.province + "</br>";
                        result += "城市名:" + data.result.addressComponent.city + "</br>";
                        result += "区县名:" + data.result.addressComponent.district + "</br>";
                        result += "街道名:" + data.result.addressComponent.street + "</br>";
                        result += "街道门牌号:" + data.result.addressComponent.street_number + "</br>";
                        result += "周边信息：</br>";
                        for (var i = 0; i < data.result.pois.length; i++) {
                            result += "地址信息:" + data.result.pois[i].addr
                                + ",数据来源:" + data.result.pois[i].cp
                                + ",离坐标点距离:" + data.result.pois[i].distance
                                + ",poi名称:" + data.result.pois[i].name
                                + ",poi类型:" + data.result.pois[i].poiType
                                + ",poi坐标x:" + data.result.pois[i].point.x
                                + ",poi坐标y:" + data.result.pois[i].point.y
                                + ",电话:" + data.result.pois[i].tel
                                + ",poi唯一标识:" + data.result.pois[i].uid
                                + ",邮编:" + data.result.pois[i].zip + "</br>";
                        }
                        $('#spanadderss').html(result);
                    }
                }
            });
        });
    });
</script>