jsp页面通过经纬度获取实际地址并显示(百度地图)

一、注册百度地图开放平台账号，地址：http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/helloworld；

注册成功后点击<应用管理>菜单，选择<创建应用>，创建自己的应用，成功后会生成ak，拿着这个ak去代码中实现获取地址功能；

二、在工程中jsp页面引入百度地图api和jquery

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=此处为第一步生成的ak"></script>

三、页面简单写写，传入要转换的经纬度

<div class="container">
    经度：<input type="text" id="jd"/>
    纬度：<input type="text" id="wd"/>
   <div id="apple"></div>
   <input type="button" value="获取位置" οnclick="getPoi()"/>
</div>

四、关键代码在<script>中

//通过百度地图成功转化经纬度并显示到界面
function getPoi() {
    var x = $("#jd").val();
    var y = $("#wd").val();
    let point = new BMap.Point(x, y);
    let gc = new BMap.Geocoder();

    gc.getLocation(point, function (rs) {
        let addComp = rs.addressComponents;
        //详细地址为省，市，行政区，街道，街道地址
        address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
        alert(addComp.city);
        alert(address);
        $("#apple").html(address);//显示到界面上
        window.localStorage.city = addComp.city;//当前城市
        window.localStorage.district = addComp.district;
    });
}

</script>

五、查看效果

非常简单就实现了。

注：如有问题可以回复，看到第一时间分析解决，码农不易，感觉对您有用，帮助到您，可否打赏一杯可乐，在此谢过诸位，愿诸君终成大神，前程似锦~~~

来源：CSDN

作者：XueXiao66

链接：https://blog.csdn.net/zfr_xuexiao66/article/details/103480184

标签

经纬度