springboot+layui整合百度地图

尽力漂亮

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

阅读量6.3k

点赞数

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

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

版权

文章目录

前言

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

新手版

第一步： 注册百度账号，在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;
            left: 50%;
            top: 100%;

最低0.47元/天解锁文章

尽力漂亮

关注

0
点赞
踩
37

收藏

觉得还不错? 一键收藏
12
评论
springboot+layui整合百度地图

文章目录前言新手版进阶版总结目标思路与步骤目标1：实现多个站点在地图上的显示目标2：显示站点的信息与实时数据卡点击标注出现layui的卡片样式目标4 百度地图窗体InfoBox打开当前窗体时关闭上一个窗体细节处理目标：遍历实时值前言为了让我们这种小白更好的理解这个技术点我分为新手版和进阶版来写这个博客新手版第一步：注册百度账号，在http://lbsyun.baidu.com/apiconsole/key?application=key 页面申请密钥(AK)第二步：页面引入第三步：地图
复制链接

扫一扫