百度地图开发：海量点、测距以及定位聚合功能

项目说明

• 百度地图海量点
• 测距功能插件
• 定位功能

引入API封装接口

    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=11Z8uiP8kIz6AG0**"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>

初始化地图&地图控件

    var map = new BMap.Map("map", {enableMapClick: false});
    map.centerAndZoom(new BMap.Point(105.000, 38.000), 5);
    map.enableScrollWheelZoom();

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

    //比例尺控件;
    map.addControl(new BMap.ScaleControl());

    //测距;
    myDis = new BMapLib.DistanceTool(map);

海量点

  // 判断当前浏览器是否支持绘制海量点；
    if (document.createElement('canvas').getContext) {
        $.getJSON("../api/api.php?act=getMassive&token=3cab7ce4142608c0f40c785b5ab5ca24", function (res, status) {
            //console.log(res.data);
            var points = [];
            for (var i = 0; i < res.data.length; i++) {
                points.push(new BMap.Point(res.data[i].poi_lng, res.data[i].poi_lat));
            }
            var options = {
                size: BMAP_POINT_SIZE_NORMAL,
                shape: BMAP_POINT_SHAPE_CIRCLE,
                color: '#E60000'
            }
            var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
            pointCollection.addEventListener('click', function (e) {
                console.log('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
            });
            //添加Overlay
            map.addOverlay(pointCollection);
        })
    } else {
        console.log('请在chrome、safari、IE8+以上浏览器查看本示例');
    }

定位

 // 添加定位控件;
    var geolocationControl = new BMap.GeolocationControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT
    });
    geolocationControl.addEventListener("locationSuccess", function (e) {
        // 定位成功事件
        map.centerAndZoom(e.point, 17);
    });
    map.addControl(geolocationControl);

    bdGeo();

    //定位;
    function bdGeo() {
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                //map.clearOverlays();
                //返回当前中心点;
                map.panTo(r.point);
                //var points=new BMap.Point(r.point.lng, r.point.lat);
                map.centerAndZoom(r.point, 17);
                //console.log(map.getZoom())
                //var marker = new BMap.Marker(r.point);
                // map.addOverlay(marker);
            } else {
                alert('failed' + this.getStatus());
            }
        }, function (error) {
            console.log(error);
        }, {
            enableHighAccuracy: true,//是否要求高精度的地理位置信息
            timeout: 1000,//对地理位置信息的获取操作做超时限制，如果再该事件内未获取到地理位置信息，将返回错误
            maximumAge: 0//设置缓存有效时间，在该时间段内，获取的地理位置信息还是设置此时间段之前的那次获得的信息，超过这段时间缓存的位置信息会被废弃
        });

@LOCKDATAV 地图信息可视化