百度地图API 实现地图多点标注
Posted zolty
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了百度地图API 实现地图多点标注相关的知识,希望对你有一定的参考价值。
1.mysql设计
2.java
@RequiresPermissions("system:lmonitor:list")
@PostMapping("/list")
@ResponseBody
public TableDataInfo list(LstMonitor lstMonitor)
startPage();
List<LstMonitor> list = lstMonitorService.selectLstMonitorList(lstMonitor);
return getDataTable(list);
3.js
<script th:inline="javascript">
var mapList =[];
var prefix = ctx + "system/lmonitor";
$.ajax(
url: prefix + "/list",
async: false,
type: 'POST',
dataType: 'json',
data : null,
success: function (data)
mapList = data['rows'];
);
var map = new BMap.Map('container'); // 创建地图实例
var center = new BMap.Point(121.18720385246547,31.28460823015341); // 设置中心点
map.centerAndZoom(center, 100); // 初始化地图, 设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //启用滚轮放大缩小,默认禁用
map.enableKeyboard(true); //启用键盘操作,默认禁用。
map.enableDragging(); //启用地图拖拽,默认启用
map.enableDoubleClickZoom(); //启用双击放大,默认启用
map.addControl(new BMap.NavigationControl()); //平移缩放控件
map.addControl(new BMap.ScaleControl()); //比例尺控件
var markers = new Array();
var contents = new Array();
var points = new Array();
var infos = new Array();
var infoWindows = new Array();
for (var i = 0; i < 4; i++)
var resolution = 10000000;
var longitude = mapList[i]['longitude'] / resolution;
var latitude = mapList[i]['latitude'] / resolution;
var devId = mapList[i]['devId'];
var opt = width: 200, height: 100, title: "背景OBU"; // 创建信息窗口
points[i] = new BMap.Point(longitude,latitude); // 设置中心点
markers[i] = new BMap.Marker(points[i]);
map.addOverlay(markers[i]);
infos [i] = "<font color='#f10'>设备ID:" + devId + "</font><br>经度:" + longitude + "<br>纬度:" + latitude;
infoWindows [i] = new BMap.InfoWindow(infos[i], opt);
mark_point(infoWindows[i],points[i]);
;
function mark_point(infoWindow,point)
markers[i].addEventListener('click', function()
this.openInfoWindow(infoWindow,point);
);
</script>
4.效果图
以上是关于百度地图API 实现地图多点标注的主要内容,如果未能解决你的问题,请参考以下文章