【百度地圖】js 實現給百度地圖添加網格並加入點位數據

本篇結合百度地圖的JavaScriptAPI在地圖上實現網格效果，具體方法可參考百度地圖的類參考文檔：
JavaScript API v2.0類參考：
1、首先引入百度地圖API的密鑰和數據js文件，百度密鑰沒有的同學可以在百度地圖官網上自行申請，然後創建地圖實例：

<script src="Js/GridDataMap.js"></script>
 <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;}
        #allmap{width:100%;height:100%;}
        p{margin:5px; font-size:14px;}
    </style>


<div id="allmap"></div>
<script type="text/javascript">
    var myMap = new gridMap("container");
</script>

2、GridDataMap.js

//模擬百度地圖的海量數據創建的地圖經緯度點位數據
var GridDataMap = {
    NearestTime: "2018-05-18 15:20:00",
    userTime: "2018-05-18 15:32:11",
    errorno: 0,
    rt_loc_cnt: 47764510,
    total: 15,
    data: [[113.181, 34.783, 1], [113.393, 34.793, 1], [113.750, 34.801, 1], [113.488, 34.786, 1], [113.532, 34.837, 1],
        [113.657, 34.753, 1], [113.63678, 34.7577, 1], [113.073, 33.162, 1], [113.139, 33.549, 1], [113.821, 39.33, 1],
        [113.671, 34.767, 1], [113.527, 34.751], [113.912, 33.307], [113.447, 33.657], [113.642, 34.754], [113.636, 34.753]
    ]
};

//創建實例
var gridMap = function (id, center, level) {
    this.initCenter = new ZPoint(113.649, 34.756);//初始化的中心點，同時爲了定義網格的中心點
    this.id = id;//div的id
    this.level = level ? level : 15;//地圖級別
    this.center = center ? center : this.initCenter;//中心點
    this.map = null;//百度地圖實例
    this.XY = null;//經緯度
    this.mapLoad();
};
//構造屬性
gridMap.prototype = {
    mapLoad: function () {
        var GMap = this;
        this.map = new BMap.Map("allmap");
        this.map.centerAndZoom(new BMap.Point(113.649, 34.756), 15);
        var bottom_right_navigation = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_ZOOM
        }); //縮放按鈕
        var bottom_left_control = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT,
            offset: new BMap.Size(0, 50)
        }); //比例尺
        this.map.addControl(bottom_left_control);
        this.map.addControl(bottom_right_navigation);    //添加地圖類型控件
        this.map.setMapStyle({style: 'googlelite'});
        this.map.enableScrollWheelZoom();
        this.showPolyline();//初始化折線
        this.showPoint();//初始化點位
        this.map.addEventListener("dragend", function () {
            GMap.showPolyline();
            GMap.showPoint();
        });
        this.map.addEventListener("zoomend", function () {
            GMap.showPolyline();
            GMap.showPoint();
        });
    },
    //創建矩形，獲取矩形的點位信息
    bs: function () {
        var bs = this.map.getBounds();
        var bssw = bs.getSouthWest();
        var bsne = bs.getNorthEast();
        return {'x1': bssw.lng, 'y1': bssw.lat, 'x2': bsne.lng, 'y2': bsne.lat};
    },
    showPolyline: function () {
        var zoome = this.map.getZoom();
        this.map.clearOverlays();
        if (zoome > 12) {
            this.XY = this.bs();
            for (var i = this.XY.x1; i < this.XY.x2; i = i + 0.0063) {
                var polyline = new BMap.Polyline([
                    new BMap.Point(i, this.XY.y1),
                    new BMap.Point(i, this.XY.y2)
                ], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
                this.map.addOverlay(polyline);
            }
            for (var i = this.XY.y1; i < this.XY.y2; i = i + 0.0048) {
                var polyline = new BMap.Polyline([
                    new BMap.Point(this.XY.x1, i),
                    new BMap.Point(this.XY.x2, i)
                ], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
                this.map.addOverlay(polyline);
            }
        }
    },
    showPoint: function () {
        if (document.createElement('canvas').getContext) {
            var points = [];  // 添加海量點數據
            for (var i = 0; i < GridDataMap.data.length; i++) {
                points.push(new BMap.Point(GridDataMap.data[i][0], GridDataMap.data[i][1]));
            }
            var options = {
                size: BMAP_POINT_SIZE_BIG,
                shape: BMAP_POINT_SHAPE_CIRCLE,
                color: 'red'
            };
            var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
            this.map.addOverlay(pointCollection);  // 添加Overlay
        } else {
            alert('請在chrome、safari、IE8+以上瀏覽器查看本示例');
        }
    },
    reset: function () {//重置
        this.map.reset();
    }
};
var ZPoint = function (x, y, code) {
    this.code = code;
    this.point = new BMap.Point(x, y);
};

3、效果示意：

4、補充：
本篇參考百度地圖中動態生成網格