将数据库的坐标集封装进百度地图显示

　　举个例子：大家都使用过摩拜单车吧，打开首页就是一对红点，红点就是单车的坐标

　　静态页面就不分享了，大家引入一个百度地图。 下面就撸代码了

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=********"></script>

　　百度地图的Ak需要自己申请，

　　直接上代码了，由于没有什么技术难度

 // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.enableScrollWheelZoom(true);

    // 定位，获取位置，并添加图标
    getCurrent();

    function getCurrent() {
        map.clearOverlays();
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                //由于地图api获取的位置偏差较大，根据api文档加上偏移值矫正坐标
                var point = new BMap.Point(r.point.lng, r.point.lat);
                addIcon(point, "./img/biaoIcon.png", 15, 30);
                map.centerAndZoom(r.point, 15);
                randAddTag();
            }
            else {
                alert('failed' + this.getStatus());
            }
        }, {enableHighAccuracy: true})
    }

    function addIcon(point, iconSrc, w, h) {
        var myIcon = new BMap.Icon(iconSrc, new BMap.Size(w, h), {
            imageSize: new BMap.Size(w, h)
        });
        var marker2 = new BMap.Marker(point, {offset: new BMap.Size(0, -13), icon: myIcon});  // 创建标注
        map.addOverlay(marker2);              // 将标注添加到地图中
    }

    // 随机向地图添加15个标注
    function randAddTag() {
        var bounds = map.getBounds();
        var sw = bounds.getSouthWest();    // 返回矩形区域的西南角
        var ne = bounds.getNorthEast();    // 返回矩形区域的东北角

        var lngSpan = Math.abs(sw.lng - ne.lng);
        var latSpan = Math.abs(ne.lat - sw.lat);


        //获取转借坐标点
        $.ajax({
            type: "post",
            url: "${ctx}/web/bookLend/BookLendingLocationList",
            data: {},
            dataType: "JSON",
            success: function (res) {
                var coordList = res.result;
                for (var i = 0; i < coordList.length; i++) {
                    var point = new BMap.Point(coordList[i].lng, coordList[i].lat);
                    addIcon(point, './img/biao.png', 20, 20);
                }
            }
        })
    }

    map.addEventListener('dragend', function () {
        map.clearOverlays();
        var p = map.getCenter();
        addIcon(p, "./img/biaoIcon.png", 15, 30);
        randAddTag();
    })