百度地图循环添加个标点及信息框

<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>

json返回的格式:

[{"name":"蓝泊湾酒店","lat":"33.46917263305","longt":"118.22015188956"},{"name":"希尔顿宾馆","lat":"33.463897899313764","longt":"118.22722780998242"}]

参考:

http://www.526net.com/blog/qianduan/155.html

http://developer.baidu.com/map/reference/index.php?title=Class:%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB/InfoWindow



  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值