项目需求
- 基于百度地图开发POI标注，预计POI数量在1w+；
- 设置对应的POI信息弹窗；
- 按地级市区域筛选当前所有标注的POI信息；
- 单个POI标注能独立定位并展示所在的区域（行政边界区划）；
- 客户自主选择显示当前页面POI信息点的数量；
- 地级市POI数据统计柱图；
项目分析
百度地图信息标注，同一页面是无法显示海量点的，会出现严重卡顿的情况；如果要显示海量点，需要借助mapv，但是却无法实现POI信息弹窗的功能；同时考虑到本次标注开发的主要目的是为了快速筛选和确定对应标注的信息，不是为了展示POI众多。
解决方案： 常规百度地图标注开发+信息弹窗+获取可视行政区域，三个API即可。
确定标注点由客户自主选择一次展现多少，需要根据用户的选择加载对应的数据即可。
解决方案： layUI table翻页，分段加载数据。用户选择每页显示多少条数据，即可加载多少个标注信息。
开发筛选功能，按地级市和标注地址（或编号）搜索；
解决方案： 传递对应的参数到API接口，在php后端按照参数筛选数据即可。
地级市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!
