jQuery：[2]百度地图开发平台实战

jQuery：[2]百度地图开发平台实战

原文链接：   http://blog.csdn.net/moniteryao/article/details/51078779

快速开始

开发平台地址

　　http://lbsyun.baidu.com/index.php?title=jspopular

示例Demo

<div style="min-height: 480px; width: 100%;" id="map">
</div>
<script type="text/javascript">
var lat = '33.485931', longt = '118.23049', bcode='0';
var markerArr;
$(function () {
    var url = "../Controls/SelectControl.aspx?action=getchecklist";
    //$(".test").html(url);
    $.ajax({
        url: url,
        dataType: 'json',
        type: 'get',
        async: false,
        success: function (data) {
            markerArr = data;
            creatmap();
        }
    });
});
var pointarr = new Array();
var infoWindow = new Array();
var map;
function creatmap() {

    map = new BMap.Map("map");
    //第1步：设置地图中心点
    var point = new BMap.Point(longt, lat); //113.312463,23.146515

    map.addOverlay(marker);
    //第2步：初始化地图,设置中心点坐标和地图级别。
    //设置可否拖拽
    //marker.enableDragging();
    map.centerAndZoom(point, 18);
    //第3步：启用滚轮放大缩小
    map.enableScrollWheelZoom(true);
    //第4步：向地图中添加缩放控件
    var ctrlNav = new window.BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE
    });
    map.addControl(ctrlNav);
    //设置不相关图标不显示
    map.setMapStyle({
        styleJson:
            [{
                "featureType": "poi",
                "elementType": "labels",
                "stylers": {
                    "color": "#000000",
                    "visibility": "off"
                }
            }]
    });

    //circle.enableEditing();
    //第5步：向地图中添加缩略图控件
    var ctrlOve = new window.BMap.OverviewMapControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        isOpen: 1
    });
    map.addControl(ctrlOve);
    //第6步：向地图中添加比例尺控件
    var ctrlSca = new window.BMap.ScaleControl({
        anchor: BMAP_ANCHOR_BOTTOM_LEFT
    });
    map.addControl(ctrlSca);
    //alert(markerArr.length);
    //第7步：绘制点
    for (var i = 0; i < markerArr.length; i++) {

        var p0 = markerArr[i].longt;
        var p1 = markerArr[i].lat;
        var checksum = markerArr[i].checksum;
        var point = new BMap.Point(p0, p1);  //118.230272,33.482474

        var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
        new BMap.Size(23, 25), {
            offset: new BMap.Size(10, 25),
            imageOffset: new BMap.Size(0, 0 - 10 * 25)
        });       

        var marker = new BMap.Marker(point, { icon: myIcon });//自定义图标
        map.addOverlay(marker);
        (function () {//重点在这里，闭包的作用体现出来了，不然，信息框一直指向最后一个坐标
            var index = i;
            var _iw = new BMap.InfoWindow('', { title: markerArr[i].name, width: 100,heigth:30 });
            var _marker = marker;
            _marker.addEventListener("click", function () {
                this.openInfoWindow(_iw);
            });
        })()
    }
}
//异步调用百度js
function map_load() {
    var load = document.createElement("script");
    load.src = "http://api.map.baidu.com/api?v=2.0&callback=creatmap&ak=eewwwwwwwwwwRomLeeeeeelUq";
    document.body.appendChild(load);
}
window.onload = map_load;
</script>