一、申请百度地图的ak(略)
二、引入百度地图

先插入代码,分块讲解

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('服务网点管理修改')"/>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=自己申请"></script>
    <!--百度地图key要自己注册,或者用1.4以下的版本(不需要key)-->

</head>
<body>
<form class="layui-form" action="" th:object="${ServiceNetwork}">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">

                <div class="layui-form-item" style="display:none;">
                    <label class="layui-form-label">id</label>
                    <div class="layui-input-block">
                        <input th:value="*{id}" type="text" name="id" autocomplete="off" placeholder="电站编号"
                               class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">服务网点名称</label>
                    <div class="layui-input-block">
                        <input th:value="*{serviceName}" type="text" name="serviceName" autocomplete="off"
                               placeholder="服务网点名称" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">服务网点地址</label>
                    <div class="layui-input-block">
                        <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

                        <input th:value="*{serviceAddress}" type="text" name="serviceAddress" autocomplete="off"
                               placeholder="服务网点地址" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">营业时间</label>
                    <div class="layui-input-block">
                        <input th:value="*{businessHours}" type="text" name="businessHours" autocomplete="off"
                               placeholder="营业时间" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">营运状态 </label>
                    <div class="layui-input-block">

                        <select th:field="*{operatingStatus}" name="operatingStatus" id="operatingStatus"
                                th:with="type=${@dict.getType('operating_status')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">服务网点状态</label>
                    <div class="layui-input-block">
                        <select th:field="*{serviceStatus}" name="serviceStatus" id="serviceStatus"
                                th:with="type=${@dict.getType('serviceStatus')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">电柜容量</label>
                    <div class="layui-input-block">
                        <input th:value="*{electricCabinetCapacity}" type="text" name="electricCabinetCapacity"
                               autocomplete="off" placeholder="电柜容量" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">电柜数量</label>
                    <div class="layui-input-block">
                        <input th:value="*{numberElectricCabinets}" type="text" name="numberElectricCabinets"
                               autocomplete="off" placeholder="电柜数量" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">电池数据</label>
                    <div class="layui-input-block">
                        <input th:value="*{batteryData}" type="text" name="batteryData" autocomplete="off"
                               placeholder="电池数据" class="layui-input">
                    </div>
                </div>


            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit=""
                    lay-filter="serviceNetwork-update">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    //创建和初始化地图函数:
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }

    //创建地图函数:
    function createMap() {
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(106.61680, 29.57793);//定义一个中心点坐标(当前坐标重庆)
        map.centerAndZoom(point, 12);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数:
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
        map.addEventListener('click', function (e) {
            console.log(e)
            var point = new BMap.Point(e.Ag.lng, e.Ag.lat);
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function (rs) {
                $("input[name='serviceAddress']").val(rs.address);
                console.log(rs.address)
                var opts = {
                    title: '行政区划归属',
                    width: 220,
                    height: 92
                };
                var infoStr = '<div>省:' + rs.addressComponents.province + '</div>'
                    + '<div>市:' + rs.addressComponents.city + '</div>'
                    + '<div>区:' + rs.addressComponents.district + '</div>';
                var infoWindow = new BMap.InfoWindow(infoStr, opts);
                map.openInfoWindow(infoWindow, point);

            });
        });
    }

    //地图控件添加函数:
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }


    initMap();//创建和初始化地图
</script>
<script>
    layui.use(['form', 'laydate', 'jquery'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let MODULE_PATH = rootPath + "/ServiceNetworkController";


        form.on('submit(serviceNetwork-update)', function (data) {
            let loader = layer.load();
            $.ajax({
                url: MODULE_PATH + '/edit',
                data: data.field,
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded',
                type: 'post',
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.table.reload("serviceNetwork-table");
                            layer.close(loader);
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                        layer.close(loader);
                    }
                }
            })
            return false;
        });
    })
</script>
</body>
</html>
1.引入地图(ak需要自己申请)
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ak需要自己申请"></script>
2.将地图div放置在合适的地方
                <div class="layui-form-item">
                    <label class="layui-form-label">服务网点地址</label>
                    <div class="layui-input-block">
                        <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

                        <input th:value="*{serviceAddress}" type="text" name="serviceAddress" autocomplete="off"
                               placeholder="服务网点地址" class="layui-input">
                    </div>
                </div>

3.设置地图相关函数

<script type="text/javascript">
    //创建和初始化地图函数:
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }

    //创建地图函数:
    function createMap() {
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(106.61680, 29.57793);//定义一个中心点坐标(当前坐标重庆)
        map.centerAndZoom(point, 12);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数:
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
        map.addEventListener('click', function (e) {
            console.log(e)
            var point = new BMap.Point(e.Ag.lng, e.Ag.lat);
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function (rs) {
                $("input[name='serviceAddress']").val(rs.address);
                console.log(rs.address)
                var opts = {
                    title: '行政区划归属',
                    width: 220,
                    height: 92
                };
                var infoStr = '<div>省:' + rs.addressComponents.province + '</div>'
                    + '<div>市:' + rs.addressComponents.city + '</div>'
                    + '<div>区:' + rs.addressComponents.district + '</div>';
                var infoWindow = new BMap.InfoWindow(infoStr, opts);
                map.openInfoWindow(infoWindow, point);

            });
        });
    }

    //地图控件添加函数:
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }


    initMap();//创建和初始化地图
</script>
三、地图函数

以下为点击并获取当前地址名称

    //地图事件设置函数:
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
        map.addEventListener('click', function (e) {
            console.log(e)
            var point = new BMap.Point(e.Ag.lng, e.Ag.lat);
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function (rs) {
                $("input[name='serviceAddress']").val(rs.address);
                console.log(rs.address)
                var opts = {
                    title: '行政区划归属',
                    width: 220,
                    height: 92
                };
                var infoStr = '<div>省:' + rs.addressComponents.province + '</div>'
                    + '<div>市:' + rs.addressComponents.city + '</div>'
                    + '<div>区:' + rs.addressComponents.district + '</div>';
                var infoWindow = new BMap.InfoWindow(infoStr, opts);
                map.openInfoWindow(infoWindow, point);

            });
        });
    }

其中$("input[name='serviceAddress']").val(rs.address);赋值给input框

三、成果
Map

Q.E.D.


一个爱折腾的小伙子