百度地图POI多信息点标注开发说明文档（php+layui+mysql+百度javascript API2.0+echarts4.8）

项目需求

1. 基于百度地图开发POI标注，预计POI数量在1w+；
2. 设置对应的POI信息弹窗；
3. 按地级市区域筛选当前所有标注的POI信息；
4. 单个POI标注能独立定位并展示所在的区域（行政边界区划）；
5. 客户自主选择显示当前页面POI信息点的数量；
6. 地级市POI数据统计柱图；

项目分析

1. 百度地图信息标注，同一页面是无法显示海量点的，会出现严重卡顿的情况；如果要显示海量点，需要借助mapv，但是却无法实现POI信息弹窗的功能；同时考虑到本次标注开发的主要目的是为了快速筛选和确定对应标注的信息，不是为了展示POI众多。
   解决方案： 常规百度地图标注开发+信息弹窗+获取可视行政区域，三个API即可。
2. 确定标注点由客户自主选择一次展现多少，需要根据用户的选择加载对应的数据即可。
   解决方案： layUI table翻页，分段加载数据。用户选择每页显示多少条数据，即可加载多少个标注信息。
3. 开发筛选功能，按地级市和标注地址（或编号）搜索；
   解决方案： 传递对应的参数到API接口，在php后端按照参数筛选数据即可。
4. 地级市POI数据统计柱图。
   解决方案： 百度ECHARTS开发柱状图。

项目开发

主体大屏

    百度地图POI智能标注系统
        
    




    
    
    
    
        
            
                
            
            
                
            
            查询
            重载
        
        
        
            
        
        
        
            
        
    

百度地图引入

    // 百度地图API功能
    var map;
    function intMap(markerArr) {
        map = new BMap.Map("map", {enableMapClick: false});
        map.centerAndZoom(new window.BMap.Point(markerArr[0].maker_lng, markerArr[0].maker_lat), 9);
        map.enableScrollWheelZoom();

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

        //绘制标注;
        for (var i = 0; i