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

快速开始

开发平台地址

　　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>