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

项目描述

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

外部资源调用

核心代码 构建容器

    停车场分布图
    
        
        
        搜索
        重载
    

调用地图

  /*初始化地图*/
    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  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 = '
' + pos.name + '
';
    var html = [];
    html.push('
');
    html.push('
地址：' + pos.address + '
')
    html.push('
地上车位数量：' + pos.parking_up + '
')
    html.push('
地下车位数量：' + pos.parking_down + '
')
    html.push('
面向对象：' + pos.parking_obj + '
')
    html.push('
收费模式：' + pos.parking_mode + '
')
    html.push('
联系电话：' + pos.parking_tel + '
')
    html.push('
备注信息：' + pos.parking_other + '
')
    html.push('
');

    var opts = {
        width: 310, // 信息窗口宽度
        height: 200, // 信息窗口高度
        title: '' + title + '', // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
    }

    var infoWindow = new BMap.InfoWindow(html.join(""), opts);
    var openInfoWinFun = function () {
        marker.openInfoWindow(infoWindow);
    };
    marker.addEventListener("click", openInfoWinFun);
    return openInfoWinFun;
}

@lockdata.cn