百度地图JavaScript API

自定义控件

js代码

      //百度地图，定义一个控件类，即function    
        function ZoomControl(){
            // 设置默认停靠位置和偏移量  
            this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;    
            this.defaultOffset = new BMap.Size(10, 10);    
        }    
        // 通过JavaScript的prototype属性继承于BMap.Control   
        ZoomControl.prototype = new BMap.Control();

        //自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
        //在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
        ZoomControl.prototype.initialize = function(map){    
             // 创建一个总DOM元素   
             var div = document.createElement("div");    
             // 添加图例 
             var div1 = document.createElement("div");    
             var img1 = document.createElement("IMG");
             img1.setAttribute("src", "img/img_01.png");
             img1.setAttribute("height", "16px");
             img1.setAttribute("width", "16px");
             div1.appendChild(img1);
             div1.appendChild(document.createTextNode(" 自定义控件 ")); 
             var input1 = document.createElement("input");
             input1.setAttribute("type", "checkbox");
             input1.setAttribute("id", "checkbox1");
             input1.setAttribute("value", "1");
             div1.appendChild(input1);
             div.appendChild(div1);
            
             // 设置样式    
             div.style.cursor = "pointer";    
             div.style.border = "1px solid gray";    
             div.style.backgroundColor = "white";    
             // 绑定事件  
             div1.onclick = function(e){
                 listMainBeanByPtype(1);
             };
             // 添加DOM元素到地图中   
             map.getContainer().appendChild(div);    
             // 将DOM元素返回  
             return div;    
        }

listMainBeanByPtype方法功能是查询要在地图中标记的点。在需要展示控件的页面用js方法调用控件

        // 创建控件实例    
        var myZoomCtrl = new ZoomControl();    
        // 添加到地图当中    
        map.addControl(myZoomCtrl);

编写自定义函数,创建标注，设置label样式

        // 编写自定义函数,创建标注
        function addMarker(point, tit, con, id,icon) {
            var myIcon = new BMap.Icon(icon, new BMap.Size(20, 20));
            var marker = new BMap.Marker(point, {
                icon: myIcon
            });
            map.addOverlay(marker);
            marker.addEventListener("click", function() {
            	var sContent =
            	    "<div><h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+tit+"</h4>" + 
            	    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+con+"</p>" + 
            	    "<div><a href='html/detail.html?mainId="+id+"'>详情</a></div>" + 
            	    "</div>";
            	var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
            	this.openInfoWindow(infoWindow);
            });
            //地图上显示的名称
            var label = new BMap.Label(tit, {
                offset: new BMap.Size(-38, 12)
            });
            label.setStyle({
           	　　color : "000", //字体颜色
           	　　fontSize : "10px",//字体大小 
            });　　
            marker.setLabel(label);
        }

调用方法

                	var mypoint = new BMap.Point(point.dLongitude, point.dLatitude);
                	addMarker(mypoint, point.dName, point.dIntroduction, point.mainId,markerImg);