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

2023-07-25 242

版权

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

本文涉及的产品

全局流量管理 GTM，标准版 1个月

云解析 DNS，旗舰版 1个月

公共DNS（含HTTPDNS解析），每月1000万次HTTP解析

简介： 数据可视化大屏百度地图手机端标注开发实战案例解析（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;
}

@漏刻有时

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

前言

一、引入外部js库

二、地图开发

1.二级联动菜单筛选

联动菜单

JQ联动事件

联动封装函数

php后端API接口

菜单JSON数据

2.构建地图

构建地图容器

封装百度地图

定义图标类型

自适应高度信息弹窗

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

前言

一、引入外部js库

二、地图开发

1.二级联动菜单筛选

联动菜单

JQ联动事件

联动封装函数

php后端API接口

菜单JSON数据

2.构建地图

构建地图容器

封装百度地图

定义图标类型

自适应高度信息弹窗

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像