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

**

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

**

效果图：

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);});}}//异地调用百度地图APIfunction map_load() {var load = document.createElement('script');load.src = "http://api./api?v=3.0&ak=你的百度API秘钥&callback=map_init";document.body.appendChild(load);}window.onload = map_load;