HTML

<style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的ak&s=1"></script>


<div class="layui-form-item">
    <label class="layui-form-label">详细地址</label>
         <div class="layui-input-block">
             <input id="address" name="address" class="layui-input white-border" placeholder="请填写详细地址" value="${rentIn.address!}" />
             <input type="text" name="lng" id="lng" value="${rentIn.longitude!}"/>
             <input  type="text" name="lat" id="lat" value="${rentIn.latitude!}">
        </div>
  <div id="sitePersonMap" style='width: 50%; height: 50%; position: absolute; display: none; z-index:2'></div>
</div>

JS

        function validate() {
            var address = document.getElementsByName('address')[0].value;
            if (isNull(address)) {
                alert('请选择地址');
                return false;
            }
            return true;
        }
        //判断是否是空
        function isNull(a) {
            return (a == '' || typeof(a) == 'undefined' || a == null) ? true : false;
        }
        document.getElementById('address').onclick = function () {
            if (document.getElementById('sitePersonMap').style.display == 'none') {
                document.getElementById('sitePersonMap').style.display = 'block';
            } else {
                document.getElementById('sitePersonMap').style.display = 'none';
            }
        }
        var map = new BMap.Map("sitePersonMap");
        var geoc = new BMap.Geocoder();  //地址解析对象
        var markersArray = [];
        var geolocation = new BMap.Geolocation();
        var point = new BMap.Point(116.331398, 39.897445);
        map.centerAndZoom(point, 12); // 中心点
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                map.enableScrollWheelZoom(true);
            }
            else {
                alert('failed' + this.getStatus());
            }
        }, {enableHighAccuracy: true})
        map.addEventListener("click", showInfo);
        //清除标识
        function clearOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    map.removeOverlay(markersArray[i])
                }
            }
        }
        //地图上标注
        function addMarker(point) {
            var marker = new BMap.Marker(point);
            markersArray.push(marker);
            clearOverlays();
            map.addOverlay(marker);
        }
        //点击地图时间处理
        function showInfo(e) {
            document.getElementById('lng').value = e.point.lng;
            document.getElementById('lat').value = e.point.lat;
            geoc.getLocation(e.point, function (rs) {
                var addComp = rs.addressComponents;
                var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                if (confirm("确定要地址是" + address + "?")) {
                    document.getElementById('sitePersonMap').style.display = 'none';
                    document.getElementById('address').value = address;
                }
            });
            addMarker(e.point);
        }

          java育儿园里的小学生“磨陀货”友情提供！！！
          请大家尊重原创，如要转载，请注明出处：
          转载自：https://www.jianshu.com/p/cc0ad9b8b47f，谢谢！！
          有任何疑问，欢迎加入Java交流群458443587(加群时请备注）