百度地图POI多信息点标注开发说明文档(php+layui+mysql+百度javascript API2.0+echarts4.8)

效果图

项目需求

  1. 基于百度地图开发POI标注,预计POI数量在1w+;
  2. 设置对应的POI信息弹窗;
  3. 按地级市区域筛选当前所有标注的POI信息;
  4. 单个POI标注能独立定位并展示所在的区域(行政边界区划);
  5. 客户自主选择显示当前页面POI信息点的数量;
  6. 地级市POI数据统计柱图;

项目分析

  1. 百度地图信息标注,同一页面是无法显示海量点的,会出现严重卡顿的情况;如果要显示海量点,需要借助mapv,但是却无法实现POI信息弹窗的功能;同时考虑到本次标注开发的主要目的是为了快速筛选和确定对应标注的信息,不是为了展示POI众多。
    解决方案: 常规百度地图标注开发+信息弹窗+获取可视行政区域,三个API即可。
  2. 确定标注点由客户自主选择一次展现多少,需要根据用户的选择加载对应的数据即可。
    解决方案: layUI table翻页,分段加载数据。用户选择每页显示多少条数据,即可加载多少个标注信息。
  3. 开发筛选功能,按地级市和标注地址(或编号)搜索;
    解决方案: 传递对应的参数到API接口,在php后端按照参数筛选数据即可。
  4. 地级市POI数据统计柱图。
    解决方案: 百度ECHARTS开发柱状图。

项目开发

主体大屏

<!--头部设置-->
<div class="top">
    <div class="t1">百度地图POI智能标注系统
        <button id="btn"></button>
    </div>
</div>
<div style="clear:both;"></div>
<!--主体大屏-->
<div class="mainbox">
    <!--地图渲染区-->
    <div id="map"></div>
    <!--操作面板-->
    <div class="pannel">
        <div class="demoTable lay_search">
            <div class="layui-inline">
                <select name="city" id="city_name" class="layui-input lay_select"></select>
            </div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input lay_input1" placeholder="标注地址" id="address">
            </div>
            <button class="layui-btn lay_btn1" data-type="reload" id="search">查询</button>
            <button class="layui-btn lay_btn1" id="reload">重载</button>
        </div>
        <!--列表页-->
        <div class="nice" id="table_and_page_div_id">
            <table class="layui-hide" id="lists"></table>
        </div>
        <!--统计柱图-->
        <div class="echarts_table">
            <div id="citys" style="height: 200px;"></div>
        </div>
    </div>
</div>

百度地图引入

    // 百度地图API功能
    var map;
    function intMap(markerArr) {
        map = new BMap.Map("map", {enableMapClick: false});
        map.centerAndZoom(new window.BMap.Point(markerArr[0].maker_lng, markerArr[0].maker_lat), 9);
        map.enableScrollWheelZoom();

        //添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);

        //绘制标注;
        for (var i = 0; i < markerArr.length; i++) {
            var p0 = markerArr[i].maker_lng;
            var p1 = markerArr[i].maker_lat;
            //var cat = markerArr[i].id;
            var maker = addMarker(new window.BMap.Point(p0, p1));
            addInfoWindow(maker, markerArr[i]);
        }
    }

定位按钮封装函数

/*定位按钮*/
function localHere(lng, lat, name, address, city_name) {
    var makerArr = {maker_name: name, maker_address: address};
    if (lng != "" && lat != "") {
        map.clearOverlays();
        getBoundary(city_name);
        var new_point = new BMap.Point(lng, lat);
        map.panTo(new_point);

       setTimeout(function () {
            map.centerAndZoom(new window.BMap.Point(lng, lat), 9);
        }, 1000)

        addLabel(new window.BMap.Point(lng, lat), "A");
        var maker = addMarker(new window.BMap.Point(lng, lat));
        addInfoWindow(maker, makerArr);
    } else {
        layer.alert('定位失败,经纬度信息不合法。', {icon: 6}, function () {
            window.parent.location.reload();
        });
    }
}

行政区划边界可视封装函数

/*获取行政区域边界
 * 1.仅支持省市县级别的边界读取,不支持乡镇级别;
 * 2.读取的是以百度地图API的边界数据,BD-09坐标系;
 * */
function getBoundary(city_name) {
    var bdary = new BMap.Boundary();
    bdary.get(city_name, function (rs) {
        //console.log(rs);
        var count = rs.boundaries.length;
        console.log(count);
        if (count === 0) {
            alert('未能获取当前输入行政区域');
            return;
        }
        //目标行政区划遮罩层;
        var pointArray = [];
        for (var i = 0; i < count; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], {
                strokeWeight: 3,
                strokeColor: "#000",
                fillOpacity: "1",
                fillColor: ""
            }); //建立多边形覆盖物
            map.addOverlay(ply);  //添加覆盖物
            pointArray = pointArray.concat(ply.getPath());
        }
        //map.setViewport(pointArray);
    });
}

layUI表格要点

layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table, form = layui.form;
        table.render({
            elem: '#lists'
            , height: 480 //固定值
            , url: 'api/api.php?act=getMakers&token=3cab7ce4142608c0f40c785b5ab5ca24'
            , limits: [10, 20, 30, 50]
            , page: {
                layout: ['count', 'prev', 'page', 'next', 'limit'] //自定义分页布局
                //, curr: 2 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
            }
            , id: 'searchTable'
            , cols: [[
                // {field: 'maker_id', title: '编号', width: "30%", sort: true}
                {field: 'maker_name', title: '标注地址', width: "80%", sort: true}
                , {field: 'lock', title: '定位', templet: '#checkboxTpl', unresize: true, align: 'center'}
            ]]
            , done: function (res, curr, count) {
                //渲染地图;
                if (res.data.length > 0) {
                    var markerArr = res.data;
                    intMap(markerArr);
                } else {
                    layer.alert('无法搜索到数据,页面将自动返回默认页', {icon: 6}, function () {
                        window.location.reload();
                    });
                }
                //得到当前页码
                //console.log(curr);
                //得到数据总量
                //console.log(count);
            }
        });

height: 480,实现表格内滚动条;
limits: [10, 20, 30, 50],实现加载数据和标注点的数量;
done: function (res, curr, count),回调实现数据加载到地图中;

API数据格式

{
  "code": 0,
  "msg": "",
  "count": 11,
  "data": [
    {
      "id": 1001,
      "maker_lng": 112.945757,
      "maker_lat": 28.234126,
      "city_name": "长沙市",
      "maker_name": "长沙市人民政府",
      "maker_address": "长沙市人民政府"
    },
    {
      "id": 1002,
      "maker_lng": 111.950686,
      "maker_lat": 27.770427,
      "city_name": "娄底市",
      "maker_name": "回龙山",
      "maker_address": "回龙山"
    }
  ]
}


lockdatav Done!

已标记关键词 清除标记
相关推荐
<p> <strong><span style="font-size:24px;">课程简介:</span></strong><br /> <span style="font-size:18px;">历经半个多月的时间,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。</span><span></span> </p> <p> <span style="font-size:18px;">其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程!</span><span></span> </p> <p> <br /> </p> <p> <span style="font-size:24px;"><strong>核心技术栈列表</strong></span><span style="font-size:24px;"><strong>:</strong></span> </p> <p> <br /> </p> <p> <span style="font-size:18px;">值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括</span><span style="font-size:18px;">Spring Boot</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Spring MVC</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Mybatis</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Mybatis-Plus</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Shiro(</span><span style="font-size:18px;">身份认证与资源授权跟会话等等</span><span style="font-size:18px;">)</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Spring AOP</span><span style="font-size:18px;">、防止</span><span style="font-size:18px;">XSS</span><span style="font-size:18px;">攻击、防止</span><span style="font-size:18px;">SQL</span><span style="font-size:18px;">注入攻击、过滤器</span><span style="font-size:18px;">Filter</span><span style="font-size:18px;">、验证码</span><span style="font-size:18px;">Kaptcha</span><span style="font-size:18px;">、热部署插件</span><span style="font-size:18px;">Devtools</span><span style="font-size:18px;">、</span><span style="font-size:18px;">POI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Vue</span><span style="font-size:18px;">、</span><span style="font-size:18px;">LayUI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">ElementUI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">JQuery</span><span style="font-size:18px;">、</span><span style="font-size:18px;">HTML</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Bootstrap</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Freemarker</span><span style="font-size:18px;">、一键打包部署运行工具</span><span style="font-size:18px;">Wagon</span><span style="font-size:18px;">等等,如下图所示:</span><span></span> </p> <img src="https://img-bss.csdn.net/201908070402564453.png" alt="" /> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:24px;">课程内容与收益</span><span style="font-size:24px;">:</span><span></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070403452052.png" alt="" /> </p> <p> <span style="font-size:18px;">总的来说,</span><span style="font-size:18px;">本课程是一门具有很强实践性质的“项目实战”课程,即“</span><span style="font-size:18px;">企业应用员工角色权限管理平台</span><span style="font-size:18px;">”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于</span><span style="font-size:18px;">Shiro</span><span style="font-size:18px;">的资源授权实现员工</span><span style="font-size:18px;">-</span><span style="font-size:18px;">角色</span><span style="font-size:18px;">-</span><span style="font-size:18px;">操作权限、员工</span><span style="font-size:18px;">-</span><span style="font-size:18px;">角色</span><span style="font-size:18px;">-</span><span style="font-size:18px;">数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图:</span> </p> <p> <span></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070404285736.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:18px;"><strong>以下为项目整体的运行效果截图:</strong></span> <span></span> </p> <img src="https://img-bss.csdn.net/201908070404538119.png" alt="" /> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405002904.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405078322.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405172638.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405289855.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405404509.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405523495.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p style="text-align:left;"> <span style="font-size:18px;">值得一提的是,在本课程中,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:</span><span></span> </p> <img src="https://img-bss.csdn.net/201908070406328884.png" alt="" /> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页