首页 > 代码库 > 百度地图使用

百度地图使用

头部:

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


页面载入地图

// -------------- 载入地图 -----------------
var map = new BMap.Map("lightning-wrapper", {minZoom: 5, mapType: BMAP_SATELLITE_MAP});
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom();
// 标注行政区
var bdary = new BMap.Boundary();
// 标注行政区
bdary.get(‘${city}‘, function (rs) {
    var count = rs.boundaries.length;
    for (var c = 0; c < count; c++) {
        var ply = new BMap.Polygon(rs.boundaries[c], {strokeWeight: 1, strokeColor: "#FF0000", fillColor: "#FEFEFE", fillOpacity: 0.6});
    }
    map.addOverlay(ply);
    map.setViewport(ply.getPath());
});


使用自定义图标

var myIcon = new BMap.Icon("${resource(dir: ‘images‘, file: ‘lightning.png‘)}", new BMap.Size(32, 32));


处理数据

$(".searchable").bind("click", function () {
    // 先清除所有的active
    $(".searchable").removeClass("active");
    var active = $(this);
    active.addClass("active");
    // 请求页面
    var begin = active.attr("begin");
    var end = active.attr("end");
    var reqUrl = dataUrl;

    // 替换请求的时间变量
    reqUrl = reqUrl.replace(‘begin‘, begin).replace(‘end‘, end);

    txt.html("请求数据...");

    // 先清除所有的点
    for (var i = 0; i < markers.length; i++) {
        map.removeOverlay(markers[i]);
    }

    // 清除容器
    markers = [];

    // 请求数据
    $.ajax({
        type: ‘get‘,
        url: reqUrl,
        dataType: ‘jsonp‘,
        jsonp: "callback",
        jsonpCallback: "callback1",
        success: function (data) {
            // 解析数据,加入到地图中
            // 输出经纬度
            if ("DB_ERROR : query no dataset" == data) {
                txt.html("没有数据");
            } else {
                txt.html("找到 " + data.length + " 条记录");
                for (var i = 0; i < data.length; i++) {
                    var lot = data[i][‘longitude‘];
                    var lat = data[i][‘latitude‘];
                    var ist = data[i][‘intensity‘];

                    if (lot && lat) {
                        // 加入到地图
                        var point = new BMap.Point(lot, lat);
                        markers[i] = new BMap.Marker(point, {icon: myIcon});
                        map.addOverlay(markers[i]);
                    }
                }
            }
        }

    });
});


百度地图使用