数据可视化大屏百度地图手机端标注开发实战案例解析（jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API）
系列文章目录
- 百度地图API开发：停车场分布标注和检索静态版
- 数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析（百度地图jsAPI，包含缩放控件、点线覆盖物、弹窗、标注图标分类功能）
- 百度地图开发：Label文本居中
- 百度地图高级开发：获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案
- 百度地图开发:地图调起API（Web端）使用终点经纬度直接调用百度地图导航信息的解决方案
- 漏刻有时地理信息可视化百度地图标注系统本地Excel版说明书
文章目录
- 系列文章目录
- 前言
- 一、引入外部js库
- 二、地图开发
- 1.二级联动菜单筛选
- 联动菜单
- JQ联动事件
- 联动封装函数
- php后端API接口
- 菜单JSON数据
- 2.构建地图
- 构建地图容器
- 封装百度地图
- 定义图标类型
- 自适应高度信息弹窗
前言
百度地图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><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 = '';for (var i = 0; i < data.length; i++) {memberHtml += ' data[i] + '" >' + data[i] + ''}$('#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 = '' + pos.poi_name + ' + pos.poi_id + '" target="_blank"> 详情>> ';var html = [];html.push('');html.push('经办事项：' + pos.poi_type + '')html.push('所在区域：' + pos.poi_area + '')html.push('经办地址：' + pos.poi_address + '')html.push('办公时间：' + pos.poi_hours + '')html.push('咨询电话：' + pos.poi_phone + '')html.push('事项范围：' + pos.poi_item + '')html.push(' + pos.poi_order + '" target="_blank"> + pos.poi_lat + ',' + pos.poi_lon + '&coord_type=bd09ll&output=html&src=lockdatav" target="_blank">')html.push('');var opts = {width: 300, // 信息窗口宽度height: 0, //自适应title: ''
+ title + '', // 信息窗口标题enableMessage: true, //设置允许信息窗发送短息}var infoWindow = new BMap.InfoWindow(html.join(""), opts);var openInfoWinFun = function () {marker.openInfoWindow(infoWindow);};marker.addEventListener("click", openInfoWinFun);return openInfoWinFun;
}
@漏刻有时
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！