数据可视化大屏百度地图手机端标注开发实战案例解析（jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API）

2023-07-25 147

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 数据可视化大屏百度地图手机端标注开发实战案例解析（jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API）

前言

百度地图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;
}

@漏刻有时