百度地图多标注显示以及自定义图标

**

百度地图多标注显示以及自定义图标

**

效果图：

HTML部分

<style>
	*{
		margin:0px;
		padding:0px
	}			
	html{
		font-size: 100%;
	}  
	body{
		font-size:1em;
	} 
	
	 body,html,#container {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin: 0;
		position: absolute;
	}
</style>
<div id="container"></div>

JS部分

<script type="text/javascript" src="js/jquery-1.10.2.js" ></script>
var markerArr = [
		{
			name:"设备1",
			location:"上海市浦东新区东方路2000号东视大厦",
			lng: "121.51",
			lat: "31.24",
			isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}
		},
		{
			name:"设备2",
			location:"上海市浦东新区世纪大道1号",
			lng: "121.4095",
			lat: "31.24",
			isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}
		},
		{
			name:"设备3",
			location:"上海市静安区老沪太路203甲",
			lng: "121.4095",
			lat: "31.1796",
			isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}
		},
		{
			name:"设备4",
			location:"上海市浦东新区东方路2000号东视大厦",
			lng: "121.4095",
			lat: "31.2000",
			isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}
		},
 ];

    
 function map_init() {
 var map = new BMap.Map("container"); // 创建Map实例
        
        var point = new BMap.Point(121.4095,31.1796); //地图中心点，广州市
        map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
        map.enableScrollWheelZoom(true); //启用滚轮放大缩小
        //向地图中添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);

        //向地图中添加缩略图控件
        var ctrlOve = new window.BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: 1
        });
        map.addControl(ctrlOve);

        //向地图中添加比例尺控件
        var ctrlSca = new window.BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrlSca);

        var point = new Array(); //存放标注点经纬信息的数组
        var marker = new Array(); //存放标注点对象的数组
        var info = new Array(); //存放提示信息窗口对象的数组
         for (var i = 0; i < markerArr.length; i++) {
            var p0 = markerArr[i].lng; //
            var p1 = markerArr[i].lat; //按照原数组的point格式将地图点坐标的经纬度分别提出来
            var myIcon1 = new BMap.Icon("/intelControlManage/img/CCD.png", new BMap.Size(32,32));
            point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
            marker[i] = new window.BMap.Marker(point[i],{icon:myIcon1}); //按照地图点坐标生成标记
            map.addOverlay(marker[i]);
            var label = new window.BMap.Label(markerArr[i].name, { offset: new window.BMap.Size(20, -20) });
            label.setStyle({
				 color : "#2c2c2c",
				 fontSize : "12px",
				 paddingLeft :'10px',
				 paddingRight :'10px',
				 border: 'none',
				 height : "20px",
				 lineHeight : "20px",
				 fontFamily:"微软雅黑"
			 });
            marker[i].setLabel(label);
            info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;line-height:1.8em;’>" + markerArr[i].name + "</br>地址：" + markerArr[i].location  + "</br></p>"); // 创建信息窗口对象
			addInfo(info[i].content,marker[i]);

        }(i);
        map.setViewport(markerArr) //让所有点在视野范围内
        //点击标注显示内容
        function addInfo(txt,marker){
		    let infoWindow = new BMap.InfoWindow(txt); //这里一定要使用let声明，否则显示出来的都是最后一条信息
		    marker.addEventListener("click", function(){
		    	this.openInfoWindow(infoWindow);
		    });
		}
	 }
	 //异地调用百度地图API
	 function map_load() {
        var load = document.createElement('script');
        load.src = "http://api.map.baidu.com/api?v=3.0&ak=你的百度API秘钥&callback=map_init";
        document.body.appendChild(load);
    }
    window.onload = map_load;