前言
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。
目前众多jsAPI接口中，常用的为地图标注、文本标签和信息弹窗，也是比较常见的客户需求。
一、引入外部js库
<!--百度地图核心库--> <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=3HGqGo***"></script> <!--layUI核心库--> <link href="static/layui/css/layui.css" type="text/css" rel="stylesheet"> <script src="static/layui/layui.js"></script>
二、地图开发
1.二级联动菜单筛选
在手机端一般是搜索框，点击跳转到新的页面进行信息输入，然后进行筛选。本次需求是基于客户要在同一页面实现各种功能，因此，采用SPA+ajax异步加载的方式进行地图开发。
二级联动菜单，是实现对不同标注点各个分类智能筛选的。本次采用的原生select事件+lauyi样式表的联动类型。
联动菜单
<div class="searchStatus" style="text-align: center;"> <div class="layui-inline"> <select name="poi_type" id="poi_type" class="layui-select"> <option value="">经办事项</option> <option value="参保登记">参保登记</option> <option value="异地居住备案">异地居住备案</option> <option value="费用报销">费用报销</option> </select> </div> <div class="layui-inline"> <select name="poi_type2" id="poi_type2" class="layui-select"> <option value="">事项分类</option> </select> </div> <div class="layui-inline" style="width: 16%;"> <select name="poi_area" id="poi_area" class="layui-select"></select> </div> </div>
JQ联动事件
每次筛选，需要对各个select进行判断，并传递到后端API接口，实时返回对应的地理标注数据。
//联动搜索搜索; $("#poi_type").change(function () { var poi_type = $("#poi_type").val(); var poi_type2 = $("#poi_type2").val(); var poi_area = $("#poi_area").val(); getPoiType(poi_type); getMapsData(poi_type, poi_area, poi_type2, 1); }); $("#poi_type2").change(function () { var poi_type = $("#poi_type").val(); var poi_type2 = $("#poi_type2").val(); var poi_area = $("#poi_area").val(); getMapsData(poi_type, poi_area, poi_type2, 1) }); $("#poi_area").change(function () { var poi_type = $("#poi_type").val(); var poi_type2 = $("#poi_type2").val(); var poi_area = $("#poi_area").val(); getMapsData(poi_type, poi_area, poi_type2, 1); });
联动封装函数
//经办事项二级联动菜单 function getPoiType(poi_type) { if (poi_type) { var data = filterCity(poiData, poi_type)[0].areaList; var memberHtml = '<option value="">事项分类</option>'; for (var i = 0; i < data.length; i++) { memberHtml += '<option value="' + data[i] + '" >' + data[i] + '</option>' } $('#poi_type2').html(memberHtml); } } //经办事项过滤 2023-04-19 By Poleung; function filterCity(arr, city) { return arr.filter(item => item.name == city); }
php后端API接口
public function getMakers() { //获取数据; @$poi_type = get_param("poi_type"); @$poi_type2 = get_param("poi_type2"); @$poi_area = get_param("poi_area"); @$keywords = get_param("keywords"); $sql = "select poi_id,poi_sn,poi_name,poi_alias,poi_area,poi_address,poi_lon,poi_lat,poi_type,poi_hours,poi_phone,poi_order,poi_item from " . $db->table('poi') . " WHERE 1 "; if ($keywords != "") { $sql .= " AND poi_name like '%" . $keywords . "%'"; } if ($poi_type != "") { $sql .= " AND poi_type = '" . $poi_type . "'"; } if ($poi_type2 != "") { $sql .= " AND poi_type2 like '%" . $poi_type2 . "%'"; } if ($poi_area != "") { $sql .= " AND poi_area = '" . $poi_area . "'"; } $sql .= " ORDER BY poi_id DESC"; $row = $db->queryall($sql); $res['code'] = 0; $res["data"] = $row; die(json_encode_lockdata($res)); }
菜单JSON数据
var poiData = [ {name:'参保登记', areaList:['单位参保登记', '城乡居民参保登记', '职工参保登记', '转移接续办理', '个人账户支取清算', '参保信息查询']}, {name:'异地居住备案', areaList:['异地人员备案', '参保账户共济备案']}, {name:'费用报销', areaList:['住院费用报销', '门诊费用报销', '未就业配偶医疗待遇核准支付', '生育津贴支付']}, ]
2.构建地图
构建地图容器
<!--地图渲染区--> <div id="map"></div>
封装百度地图
将map定义为全局函数，进行封装，便于参数的传递。整体封装的意味着，每次传递参数时，都要重新加载地图页面。
// 百度地图API功能； var map; function intMap(markerArr, type) { map = new BMap.Map("map", {enableMapClick: false}); map.centerAndZoom(new window.BMap.Point(markerArr[0].poi_lon, markerArr[0].poi_lat), 13); map.enableScrollWheelZoom(); //添加缩放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //数据标注; getMaker(markerArr, type); //绘制标注; function getMaker(markerArr, type) { var allponits = []; for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].poi_lon; var p1 = markerArr[i].poi_lat; var cat = getType(markerArr[i].poi_type); var txt = markerArr[i].poi_name; var pos = new window.BMap.Point(p0, p1) var maker = addMarker(pos, cat, txt); addInfoWindow(maker, markerArr[i]); if (type == 1) { //文本标签; addLabel(pos, txt, cat); } //设置最佳视野POI; allponits.push(pos); } map.setViewport(allponits); } }
定义图标类型
可以将标注图标按照类别进行判断，然后加载对应的图标图片。
//定义图标类型; function addMarker(point, cat, txt) { var imgUrl = 'static/rooted/images/icon' + cat + '.png'; var myIcon = new BMap.Icon(imgUrl, new BMap.Size(20, 25)); if (txt == "慈溪医保办事服务大厅") { imgUrl = 'static/rooted/images/chs.png'; myIcon = new BMap.Icon(imgUrl, new BMap.Size(30, 30)); } var marker = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker); return marker; }
自适应高度信息弹窗
//添加信息窗口 function addInfoWindow(marker, pos) { var title = '<div class="popTitle" style="background:transparent !important;">' + pos.poi_name + ' <a href="?m=Index&a=lists&act=show&poi_id=' + pos.poi_id + '" target="_blank" style="font-size: 12px;color: #0073ff;"> 详情>> </span></a></div>'; var html = []; html.push('<div>'); html.push('<div class="infoItems" style="background:transparent !important;"><span>经办事项：</span><span>' + pos.poi_type + '</span></div>') html.push('<div class="infoItems" style="background:transparent !important;"><span>所在区域：</span><span>' + pos.poi_area + '</span></div>') html.push('<div class="infoItems" style="background:transparent !important;"><span>经办地址：</span><span>' + pos.poi_address + '</span></div>') html.push('<div class="infoItems" style="background:transparent !important;"><span>办公时间：</span><span>' + pos.poi_hours + '</span></div>') html.push('<div class="infoItems" style="background:transparent !important;"><span>咨询电话：</span><span>' + pos.poi_phone + '</span></div>') html.push('<div class="infoItems" style="background:transparent !important;"><span>事项范围：</span><span>' + pos.poi_item + '</span></div>') html.push('<div class="infoItems" style="float: right;"> <a href="' + pos.poi_order + '" target="_blank"><span class="layui-icon layui-icon-survey"> 立即预约</span></a> <a href="//api.map.baidu.com/geocoder?location=' + pos.poi_lat + ',' + pos.poi_lon + '&coord_type=bd09ll&output=html&src=lockdatav" target="_blank"><span class="layui-icon layui-icon-find-fill"> 导航到这里</span></a></div>') html.push('</div>'); var opts = { width: 300, // 信息窗口宽度 height: 0, //自适应 title: '<h4>' + title + '</h4>', // 信息窗口标题 enableMessage: true, //设置允许信息窗发送短息 } var infoWindow = new BMap.InfoWindow(html.join(""), opts); var openInfoWinFun = function () { marker.openInfoWindow(infoWindow); }; marker.addEventListener("click", openInfoWinFun); return openInfoWinFun; }
@漏刻有时
