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

<!--头部设置-->
<div class="top">
    <div class="t1">百度地图POI智能标注系统
        <button id="btn"></button>
    </div>
</div>
<div style="clear:both;"></div>
<!--主体大屏-->
<div class="mainbox">
    <!--地图渲染区-->
    <div id="map"></div>
    <!--操作面板-->
    <div class="pannel">
        <div class="demoTable lay_search">
            <div class="layui-inline">
                <select name="city" id="city_name" class="layui-input lay_select"></select>
            </div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input lay_input1" placeholder="标注地址" id="address">
            </div>
            <button class="layui-btn lay_btn1" data-type="reload" id="search">查询</button>
            <button class="layui-btn lay_btn1" id="reload">重载</button>
        </div>
        <!--列表页-->
        <div class="nice" id="table_and_page_div_id">
            <table class="layui-hide" id="lists"></table>
        </div>
        <!--统计柱图-->
        <div class="echarts_table">
            <div id="citys" style="height: 200px;"></div>
        </div>
    </div>
</div>

    // 百度地图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 < markerArr.length; i++) {
            var p0 = markerArr[i].maker_lng;
            var p1 = markerArr[i].maker_lat;
            //var cat = markerArr[i].id;
            var maker = addMarker(new window.BMap.Point(p0, p1));
            addInfoWindow(maker, markerArr[i]);
        }
    }

/*定位按钮*/
function localHere(lng, lat, name, address, city_name) {
    var makerArr = {maker_name: name, maker_address: address};
    if (lng != "" && lat != "") {
        map.clearOverlays();
        getBoundary(city_name);
        var new_point = new BMap.Point(lng, lat);
        map.panTo(new_point);
       setTimeout(function () {
            map.centerAndZoom(new window.BMap.Point(lng, lat), 9);
        }, 1000)
        addLabel(new window.BMap.Point(lng, lat), "A");
        var maker = addMarker(new window.BMap.Point(lng, lat));
        addInfoWindow(maker, makerArr);
    } else {
        layer.alert('定位失败，经纬度信息不合法。', {icon: 6}, function () {
            window.parent.location.reload();
        });
    }
}

/*获取行政区域边界
 * 1.仅支持省市县级别的边界读取，不支持乡镇级别;
 * 2.读取的是以百度地图API的边界数据，BD-09坐标系；
 * */
function getBoundary(city_name) {
    var bdary = new BMap.Boundary();
    bdary.get(city_name, function (rs) {
        //console.log(rs);
        var count = rs.boundaries.length;
        console.log(count);
        if (count === 0) {
            alert('未能获取当前输入行政区域');
            return;
        }
        //目标行政区划遮罩层；
        var pointArray = [];
        for (var i = 0; i < count; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], {
                strokeWeight: 3,
                strokeColor: "#000",
                fillOpacity: "1",
                fillColor: ""
            }); //建立多边形覆盖物
            map.addOverlay(ply);  //添加覆盖物
            pointArray = pointArray.concat(ply.getPath());
        }
        //map.setViewport(pointArray);
    });
}

layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table, form = layui.form;
        table.render({
            elem: '#lists'
            , height: 480 //固定值
            , url: 'api/api.php?act=getMakers&token=3cab7ce4142608c0f40c785b5ab5ca24'
            , limits: [10, 20, 30, 50]
            , page: {
                layout: ['count', 'prev', 'page', 'next', 'limit'] //自定义分页布局
                //, curr: 2 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
            }
            , id: 'searchTable'
            , cols: [[
                // {field: 'maker_id', title: '编号', width: "30%", sort: true}
                {field: 'maker_name', title: '标注地址', width: "80%", sort: true}
                , {field: 'lock', title: '定位', templet: '#checkboxTpl', unresize: true, align: 'center'}
            ]]
            , done: function (res, curr, count) {
                //渲染地图;
                if (res.data.length > 0) {
                    var markerArr = res.data;
                    intMap(markerArr);
                } else {
                    layer.alert('无法搜索到数据，页面将自动返回默认页', {icon: 6}, function () {
                        window.location.reload();
                    });
                }
                //得到当前页码
                //console.log(curr);
                //得到数据总量
                //console.log(count);
            }
        });

{
  "code": 0,
  "msg": "",
  "count": 11,
  "data": [
    {
      "id": 1001,
      "maker_lng": 112.945757,
      "maker_lat": 28.234126,
      "city_name": "长沙市",
      "maker_name": "长沙市人民政府",
      "maker_address": "长沙市人民政府"
    },
    {
      "id": 1002,
      "maker_lng": 111.950686,
      "maker_lat": 27.770427,
      "city_name": "娄底市",
      "maker_name": "回龙山",
      "maker_address": "回龙山"
    }
  ]
}