Springboot+LayUI使用百度地图显示多个地点 因工作业务需要，使用百度地图API，通过输入多个地点的经纬度，显示在百度地图上，并结合springboot+layui进行展示页面模板用的是freemarker。JS代码：<script type="text/javascript"> var markerArr = [ {title: "名称：宜阳恒丰园烩面馆", point: "112.182404, 34.52419", address: "宜阳县文明路恒丰园食府", tel: "未知"}, {title: "名称：宜阳钓鱼岛酒店", point: "112.194981,34.521459", address: "洛阳宜阳县城关镇红旗中路 ", tel: "未知"}, {title: "名称：宜阳锦龙喜宴酒店", point: "112.1996,34.5269", address: "宜阳县城关镇锦龙大道锦龙广场内", tel: "未知"}, {title: "名称：百姓厨房", point: "112.196712,34.521718", address: "洛阳宜阳县城关镇红旗中路与丰源路交叉口", tel: "未知"} ]; var map; //Map实例 function map_init() { map = new BMap.Map("map"); //第1步：设置地图中心点，宜阳钓鱼岛酒店 var point = new BMap.Point(112.194981, 34.521459); //第2步：初始化地图,设置中心点坐标和地图级别。 map.centerAndZoom(point, 11); //第3步：启用滚轮放大缩小 map.enableScrollWheelZoom(true); //第4步：向地图中添加缩放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //第5步：向地图中添加缩略图控件 var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrlOve); //第6步：向地图中添加比例尺控件 var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrlSca); //第7步：绘制点 for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].point.split(",")[0]; var p1 = markerArr[i].point.split(",")[1]; var maker = addMarker(new window.BMap.Point(p0, p1), i); addInfoWindow(maker, markerArr[i], i); } } // 添加标注 function addMarker(point, index) { var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - index * 25) }); var marker = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker); return marker; } // 添加信息窗口 function addInfoWindow(marker, poi) { //pop弹窗标题 var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '<\/div>'; //pop弹窗信息 var html = []; html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>'); html.push('<tr>'); html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:<\/td>'); html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' <\/td>'); html.push('<\/tr>'); html.push('<\/tbody><\/table>'); var infoWindow = new BMap.InfoWindow(html.join(""), {title: title, width: 200}); var openInfoWinFun = function () { marker.openInfoWindow(infoWindow); }; marker.addEventListener("mouseover", openInfoWinFun); return openInfoWinFun; } //异步调用百度js function map_load() { var load = document.createElement("script"); load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init"; document.body.appendChild(load); } window.onload = map_load; </script>完成以上代码后，打开页面即可看到百度地图，已经刚刚添加4个地点，鼠标移入的时候能够展示出信息。但是这时候有一个不是很好看的地方，那就是地图左下角有一个百度地图的logo和一行文字。如何去掉呢？通过css样式隐藏掉，在 标签内添加css样式：<#-- 删除百度地图左下角的logo以及文字 --> <style type="text/css"> .BMap_cpyCtrl, .anchorBL { display: none; } </style>