springboot+layui整合百度地图

尽力漂亮

于 2020-11-19 16:28:30 发布

阅读量6.6k

点赞数

分类专栏：笔记前端文章标签：百度地图 springboot整合 layui整合百度地图

本文链接：https://blog.csdn.net/weixin_44106334/article/details/109744833

版权

本文详细介绍了如何将SpringBoot与LayUI结合，使用百度地图API实现地图功能，包括注册获取百度地图密钥、地图展示、多点标注、信息窗口以及动态显示站点实时数据等，适合初学者和进阶者学习。

摘要由CSDN通过智能技术生成

文章目录

前言

为了让我们这种小白更好的理解这个技术点
我分为新手版和进阶版来写这个博客

新手版

第一步： 注册百度账号，在http://lbsyun.baidu.com/apiconsole/key?application=key 页面申请密钥(AK)

第二步： 页面引入

第三步： 地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

<body>
<div id = "allmap"></div>
</body>

第四步： 实例化地图

<script type="text/javascript">
 
    //百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(120.378386,30.309756),15);//根据坐标初始化地图
     map.enableScrollWheelZoom(true);
    map.addControl(new BMap.NavigationControl());   //平移缩放控件
    map.addControl(new BMap.ScaleControl());        //比例尺
    map.addControl(new BMap.OverviewMapControl());  //缩略地图
    map.addControl(new BMap.MapTypeControl());      //地图类型
    map.setCurrentCity("杭州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
 2.map.centerAndZoom第二个参数是地图缩放级别，最大为19，最小为0。（但实际当缩小到3的时候就已经。。。）
    //添加标注
    var marker = new BMap.Marker(new BMap.Point(120.378386,30.309756));        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中
</script>

效果
在这里插入图片描述

进阶版

总结

1.map.centerAndZoom方法创建地图，第一个参数可以是根据之前创建好的一个点为中心，创建出地图，也可以根据城市地区的中文名称创建地图。（如果拼写正确，可以根据城市的英文名称来创建）
2.map.centerAndZoom第二个参数是地图缩放级别，最大为19，最小为0。（但实际当缩小到3的时候就已经。。。）

目标

在这里插入图片描述

思路与步骤

目标1：实现多个站点在地图上的显示

从理解完新手入门版，可以理解主要就是

    //添加标注
    var marker = new BMap.Marker(new BMap.Point(120.378386,30.309756));        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中

来实现多个点显示在地图上

后台思路就是：站点表和企业表联查就可以得到这些基本信息（站点id,站点名称，企业id,企业名称，mn号，经纬度）

参考关键词：百度地图动态显示标注

    /*百度地图初始化*/
    var map = new BMap.Map("allmap", {minZoom: 4, maxZoom: 15});    // 创建Map实例,并设置地图最大最小级别
    map.centerAndZoom(new BMap.Point(120.52, 30.53), 9);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));  //添加地图类型控件
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


    /*动态加载 地图标注 */
    var marker;
    var point;

    $(function(){
        $.ajax({
            type:"post",
            url:"monitor/cusEnterprisePointSearch",
            async:true,
            dataType:"json",
            success:function(data){
                alert("success")
                console.log(data.data)
                for(var i=0;i<data.data.length;i++){
                    console.log("经度"+data.data[i].longitude)
                    console.log("纬度"+data.data[i].latitude)
             
                            point =new BMap.Point(data.data[i].longitude,data.data[i].latitude);
                            marker =new BMap.Marker(point);
                            map.addOverlay(marker);
                            //!*****************
                }
              
            },
            error:function(){
                alert("fail");
            }
        });
    });

效果

在这里插入图片描述

目标2：显示站点的信息与实时数据卡

在这里插入图片描述

点击标注出现layui的卡片样式

觉得这个样式太丑了
在这里插入图片描述

思路：参考关键字找到了这篇文章

官网文档http://api.map.baidu.com/library/InfoBox/1.2/docs/symbols/BMapLib.InfoBox.html

百度地图自定义信息窗

https://blog.csdn.net/wml00000/article/details/85122011

引入js

  <script type="text/javascript"
            src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>

在这里插入图片描述

目标4 百度地图窗体InfoBox打开当前窗体时关闭上一个窗体

参考思路

  window.lastInfoBox = null;//定义上一个窗体为lastInfoBox;
//创建地图窗体
myLabel.clcik(function(){
  var info="<div style='height: 120px;'>  <div class='user-map-info-header'>车辆信息</div>" +
                    "<div class='one-info-content'>" +
                    "<p><span>车 牌 号：</span><span>1111</span></p><p><span>联系电话：</span><span>2222222</span></p></div>" +
                    "<div class='info-triangle'></div></div>";
 var infoBox = new BMapLib.InfoBox(window.map,info,{
                    boxStyle:{
                        width: "240px",
                        Height: "180px",
                        marginBottom: "75px",
                        marginleft:"6px",
                        backgroundColor:"white"
                    },
                    closeIconMargin: "12px 8px 4px 4px",
                    closeIconUrl: "Images/Map/back.png",
                    enableAutoPan: false,
                    align: INFOBOX_AT_TOP
                });
				if(lastInfoBox){
				//判断上一个窗体是否存在，若存在则执行close
                    lastInfoBox.close();
                }
                lastInfoBox = infoBox;
                infoBox.open(point);
})

我的代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>企业管理</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

    <!-- 引入公用部分 -->
    <script th:replace="common/head::static"></script>
    <!-- baidu map -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 100%;
        }

        .infoBoxContent {
            margin: 20px;
        }

        .infoBoxContent button {
            background-color: #008CBA;
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            border-radius: 16px;
            width: 120px;
        }

        .infoBoxContent h3 {
            color: white;

        }

        .infoBoxContent p {
            color: white;
        }

        .infoBoxContent:before {
            content: '';
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-top-color: #333333;
            position: absolute;