JS实现高德地图标点获取经纬度，并转换成详细地址

港控/mmm° 2022-05-11 18:26 707阅读 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>