一、注册百度地图开放平台账号,地址: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>中
<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