百度地图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 实现地图多点标注的主要内容,如果未能解决你的问题,请参考以下文章

数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图标注视频控件定位检索)

百度地图多点+画连接线+数字标注

百度地图API标注问题

百度地图API详解之地图标注

百度API使用--javascript api进行多点定位

百度地图二次开发Demo