百度地图API 实现地图多点标注

以你之姓@ 2023-01-21 04:26 30阅读 0赞

# 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.效果图 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODU0Mjkx_size_16_color_FFFFFF_t_70]: /images/20221021/560350ff84804f01874f6f2b9962712d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读

相关百度地图显示多个标注点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMy

曾经终败给现在/ 2023年05月21日 15:22/ 0 赞/ 16 阅读

相关百度地图API 实现地图多点标注

1.MySQL设计 2.java @RequiresPermissions("system:lmonitor:list") @PostMap

以你之姓@/ 2023年01月21日 04:26/ 0 赞/ 31 阅读

相关百度地图API调用实现获取经纬度以及标注

一、申请AK 百度搜索百度地图API，进入官网文档，按照官网文档提示注册百度账号并申请AK。[申请AK][AK] 填写相关信息，应用名称随意、应用类型根据协议来选择.

男娘i/ 2022年12月17日 15:55/ 0 赞/ 365 阅读

相关百度地图之调用javaScript api接口实现多点标注及显示提示信息

1.先让大家看一下效果 ![SouthEast][] 2.这个实现起来并不复杂,但调试可能需要一些时间,我做成了一个jsp,可以通过ajax调用后台获取如下json格式的数

柔光的暖阳◎/ 2022年08月27日 01:17/ 0 赞/ 466 阅读

相关百度地图API 自定义标注图标

通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，也可以使用marker.setIcon()方法。 <sc

客官°小女子只卖身不卖艺/ 2022年08月18日 05:45/ 0 赞/ 458 阅读

相关百度地图开发示例：位置标注，标注点弹框

一、申请百度地图开发者AK 1.登录百度开放平台地址：[http://lbsyun.baidu.com/][http_lbsyun.baidu.com]，使用百度账

太过爱你忘了你带给我的痛/ 2022年05月22日 12:58/ 0 赞/ 487 阅读

相关百度地图API实现地图应用

企业官网上需要用到地图应用，这里对百度地图API的使用做点笔记，好记性不如烂笔头。实现地图应用的流程如下： 1、获取密钥；教程网址 [https://jingyan.ba

灰太狼/ 2021年09月18日 10:22/ 0 赞/ 834 阅读

相关百度地图API 加载百度地图

前言百度地图在日常生活中应用的越来越多，功能也日渐丰富，我们可以使用ArcGIS JS API加载在线百度地图（[https://blog.csdn.net/i

布满荆棘的人生/ 2021年09月15日 02:50/ 0 赞/ 868 阅读

相关百度地图标注基础篇

<script type="text/javascript"> var mapObj = new BMap.Map("mapObj");

蔚落/ 2021年09月10日 05:06/ 0 赞/ 489 阅读

相关百度地图标注点、图层

[标注点地址][Link 1] [图层地址][Link 2] 标注点创建标注点对象 var 标注点对象=new BMap.标注点类型(po

超、凢脫俗/ 2021年07月24日 22:52/ 0 赞/ 733 阅读