JS实现高德地图标点获取经纬度,并转换成详细地址 港控/mmm° 2022-05-11 18:26 634阅读 0赞 <%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/webpage/include/taglib.jsp" %> <html> <head> <title>地图</title> <meta name="decorator" content="ani"/> </head> <body class="bg-white"> <form:form id="inputForm" modelAttribute="eddChargeStation" class="form-horizontal"> <form:hidden path="id"/> <table class="table table-bordered"> <tbody> <tr> <td class="width-15 active"><label class="pull-right">地图:</label></td> <td class="width-35"> <%-- <form:input path="address" htmlEscape="false" class="form-control "/>--%> <div id="addr" style="height: 200px;width: 100%"></div> </td> <td class="width-15 active"><label class="pull-right">地址:</label></td> <td class="width-35"> <form:input path="address" htmlEscape="false" class="form-control " id="address"/> </td> </tr> <tr> <td class="width-15 active"><label class="pull-right">纬度:</label></td> <td class="width-35"> <form:input path="lat" htmlEscape="false" class="form-control " id="lat"/> </td> <td class="width-15 active"><label class="pull-right">经度:</label></td> <td class="width-35"> <form:input path="lon" htmlEscape="false" class="form-control " id="lng"/> </td> </tr> </tbody> </table> </form:form> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key="你申请的key"></script> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <%--地图控件--%> <script type="text/javascript"> //初始化地图对象,加载地图 var map = new AMap.Map("addr", { resizeEnable: true }); //获取定位标记 var marker = new AMap.Marker({ position: map.getCenter(), //draggable: true, cursor: 'move', raiseOnDrag: true }); marker.setMap(map); //为地图注册click事件获取鼠标点击出的经纬度坐标 var clickEventListener = map.on('click', function(e) { //alert(e.lnglat.getLng()); document.getElementById("lng").value = e.lnglat.getLng(); document.getElementById("lat").value = e.lnglat.getLat(); marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]); // }); var clickEventListener = map.on('click', function(e) { var lng = e.lnglat.getLng(); var lat = e.lnglat.getLat(); console.log("经度:"+lng+"纬度"+lat); var lnglatXY = [lng, lat];//地图上所标点的坐标 AMap.service('AMap.Geocoder',function() {//回调函数 geocoder = new AMap.Geocoder({ }); geocoder.getAddress(lnglatXY, function (status, result) { if (status === 'complete' && result.info === 'OK') { //获得了有效的地址信息: //即,result.regeocode.formattedAddress // alert(result.regeocode.formattedAddress) document.getElementById("address").value=result.regeocode.formattedAddress;//将获取到的地址信息赋值给文本框,保存进数据库 var address = result.regeocode.formattedAddress; } else { //获取地址失败 } }); }) }); /*var auto = new AMap.Autocomplete({ input: "tipinput" }); */ AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发 function select(e) { if (e.poi && e.poi.location) { map.setZoom(15); map.setCenter(e.poi.location); } } </script> </body> </html>
还没有评论,来说两句吧...