百度地图API开发：停车场分布标注和检索静态版

项目描述

• 基于百度地图jsAPI接口开发；
• 实现标注和弹窗功能；
• 实现标注的检索功能（名称和地址）；
• 静态HTML页面；
• 卫星地图和行政地图的切换；

外部资源调用

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=3HGqGo1RHf8zsLZCMj3F***"></script>
    <script type="text/javascript" src="js/functions.js"></script>
    <script type="text/javascript" src="js/poidata.js"></script>
    <!--layui封装库-->
    <script src="js/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <!--核心样式表-->
    <link rel="stylesheet" href="css/common.css">

核心代码

构建容器

<div class="headNav">
    <div class="title">停车场分布图</div>
    <div class="searchBox">
        <div class="layui-input-inline"><input type="text" placeholder="停车场名称" class="layui-input" id="name"></div>
        <div class="layui-input-inline"><input type="text" placeholder="停车场地址" class="layui-input" id="address"></div>
        <div class="layui-input-inline"><button id="search" class="layui-btn layui-btn-normal" style="margin-bottom: 3px;">搜索</button></div>
        <div class="layui-input-inline"><button id="reload" class="layui-btn layui-btn-normal" style="margin-bottom: 3px;">重载</button></div>
    </div>
</div>
</div>
<div id="container"></div>

调用地图

  /*初始化地图*/
    intMap(data);

    /*搜索功能*/
    $(function () {
        //重载页面;
        $("#reload").click(function () {
            window.location.href = window.location.href;
        })

        $("#search").click(function () {
            var name = $("#name").val();
            var address = $("#address").val();
            if (name == "" && address == "") {
                layer.msg("停车场名称或地址不能为空", {icon: 2, time: 1000});
                return false;
            } else {
                var newData = filterData(data, name, address);
                if (newData == "") {
                    layer.msg("没有搜索对应的数据", {icon: 2, time: 1000});
                } else {
                    intMap(newData);
                }
            }
        })
    })

    // 百度地图API功能
    var map;

    function intMap(markerArr) {
        map = new BMap.Map("container", {enableMapClick: false, minZoom: 2, maxZoom: 17})
        map.centerAndZoom(new window.BMap.Point(markerArr[0].lng, markerArr[0].lat), 14);
        map.enableScrollWheelZoom();

        //地图类型控件
        map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));
        map.setMapType(BMAP_NORMAL_MAP);

        //添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);

        //绘制标注;
        var allponits = [];
        for (var i = 0; i < markerArr.length; i++) {
            var p0 = markerArr[i].lng;
            var p1 = markerArr[i].lat;
            var txt = markerArr[i].name;
            var cat = 0;
            var pos = new window.BMap.Point(p0, p1);

            //添加标注;
            var maker = addMarker(pos, cat);
            addInfoWindow(maker, markerArr[i]);

            //文本标签;
            addLabel(pos, txt);

            //设置最佳视野POI;
            allponits.push(pos);
        }
        //map.setViewport(allponits);
    }

封装函数

筛选条件

//筛选条件封装函数-精确匹配;
function filterData(data, name, address) {
    var filters = [
        o => o.name.includes(name),
        o => o.address.includes(address)
    ];
    var result = data.filter(o => filters.every(fn => fn(o)));
    return result;
}

文本标签

//文本标签;
function addLabel(point, txt) {
    var opts = {
        position: point,
        offset: new BMap.Size(0, 20)    //设置文本偏移量
    }
    var label = new BMap.Label(txt, opts);  // 创建文本标注对象
    label.setStyle({
        color: "#fff",
        fontSize: "10px",
        height: "24px",
        lineHeight: "20px",
        padding: "2px 5px",
        border: "1px solid rgba(230, 0, 0, 0.7)",
        background: "rgba(230, 0, 0, 0.7)",
        fontWeight: "bold",
        transform: 'translateX(-50%)',
        fontFamily: "微软雅黑"
    });
    map.addOverlay(label);
}

定义图标类型

//定义图标类型;
function addMarker(point, cat) {
    var imgUrl = 'images/icon' + cat + '.png';
    var myIcon = new BMap.Icon(imgUrl, new BMap.Size(32, 41));
    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;font-weight: bold;">' + pos.name + '</div>';
    var html = [];
    html.push('<div>');
    html.push('<div class="infoItems" style="background:transparent !important;"><span>地址：</span><span>' + pos.address + '</span></div>')
    html.push('<div class="infoItems" style="background:transparent !important;"><span>地上车位数量：</span><span>' + pos.parking_up + '</span></div>')
    html.push('<div class="infoItems" style="background:transparent !important;"><span>地下车位数量：</span><span>' + pos.parking_down + '</span></div>')
    html.push('<div class="infoItems" style="background:transparent !important;"><span>面向对象：</span><span>' + pos.parking_obj + '</span></div>')
    html.push('<div class="infoItems" style="background:transparent !important;"><span>收费模式：</span><span>' + pos.parking_mode + '</span></div>')
    html.push('<div class="infoItems" style="background:transparent !important;"><span>联系电话：</span><span>' + pos.parking_tel + '</span></div>')
    html.push('<div class="infoItems" style="background:transparent !important;"><span>备注信息：</span><span>' + pos.parking_other + '</span></div>')
    html.push('</div>');

    var opts = {
        width: 310, // 信息窗口宽度
        height: 200, // 信息窗口高度
        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;
}

@lockdata.cn