简易开发的百度地图API

原理

页面引入JS 设置DIV

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fwNaroz6Ddque81aKt9gWkZDTLKSoTWU"></script>
 <div id="map"></div>

  <script>
      //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }

    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("map");//在百度地图容器中创建一个地图
        var point = new BMap.Point(116.463091,39.918515);//定义一个中心点坐标
        map.centerAndZoom(point,15);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
    var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
    map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
    var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
    map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
    var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
    map.addControl(ctrl_sca);
    }

    //标注点数组
    var markerArr = [{title:"公司地址",content:"中海广场",point:"116.463046|39.916633",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"四川轮动方程科技有限公司",content:"成都市武侯区科华北路65号桃园广场27楼0007号",point:"104.081514|30.632646",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"成都惠淘车汽车服务有限公司",content:"成都市金牛区二环路西三段181号10层10号",point:"104.044129|30.696186",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"成都惠淘车汽车服务有限公司绵阳分公司",content:"绵阳高新区绵兴东路91号",point:"104.690037|31.472305",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"成都悦成汽车服务有限公司",content:"成都市金牛区二环路西三段181号10层10号",point:"104.043158|30.695813",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"重庆惠淘车汽车服务有限公司",content:"重庆市渝北区龙山街道余松路315号阳光地中海7幢1-门面8",point:"106.495969|29.594064",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"轮动方程（大连）科技有限公司",content:"辽宁省大连市甘井子区汇利街69号25层14号",point:"121.555727|38.961575",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"哈尔滨轮动方程汽车服务有限公司",content:"哈尔滨市道里区城乡路289号",point:"126.589839|45.73459",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"哈尔滨轮动方程汽车有限公司大庆分公司",content:"大庆市萨尔图区万宝三区配套二商服16号",point:"125.10393|46.577939",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"合肥市轮动方程汽车租赁有限公司",content:"合肥市庐阳区濉溪路112号万豪广场A座商250号",point:"117.292431|31.885026",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"合肥市轮动方程汽车租赁有限公司阜阳分公司",content:"阜阳市颍州区文峰路100号",point:"115.835681|32.898838",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"合肥市轮动方程汽车租赁有限公司芜湖分公司",content:"芜湖市镜湖区汇金广场A2206",point:"118.374796|31.342753",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"郑州惠淘车汽车服务有限公司",content:"郑州市金水区花园路39号3号楼2单元7层703号",point:"113.687673|34.80071",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"郑州轮动方程汽车租赁有限公司",content:"郑州市金水区金水路219号1号楼1单元15层1505号",point:"113.655295|34.769189",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"河南轮动鑫方程汽车租赁有限公司",content:"郑州市郑东新区中兴路与相济路交叉口庙张南院19号楼2单元3楼东户",point:"113.781999|34.786469",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"宁波轮动方程汽车服务有限公司嘉兴分公司",content:"浙江省嘉兴市南湖区广益路1338号汽车A厅319号",point:"120.816734|30.742862",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"宁波轮动方程汽车服务有限公司",content:"浙江省宁波市鄞州区彩虹南路16号（8-13）（集中办公区）",point:"121.391551|30.206347",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"宁夏轮动方程科技有限公司",content:"宁夏银川市兴庆区安居工程高台寺住宅区21号楼5单元602室",point:"106.30491|38.461728",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"唐山轮动方程汽车服务有限公司",content:"河北省唐山市路南区新华贸大厦1003号",point:"118.176802|39.631534",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"石家庄轮动汽车租赁有限公司",content:"河北省石家庄市桥西区自强路35号丰辉大厦2003室",point:"114.488336|38.049644",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"长春市越泽汽车服务有限公司",content:"长春市二道区晨宇小区5幢609号房",point:"125.38902|43.893488",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"松原市轮动方程汽车租赁有限公司",content:"吉林省松原市宁江区乌兰大街2286号",point:"124.839434|45.133184",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"南京仑动恒尚汇汽车租赁有限公司徐州分公司",content:"徐州市云龙区绿地世纪城七期办公楼号楼1-501",point:"117.252357|34.252805",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"南京仑动恒尚汇汽车租赁有限公司",content:"南京市玄武区中山东路319号",point:"118.828296|32.045235",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"苏州市轮动方程汽车租赁有限公司",content:"苏州市吴中区木渎镇金枫南路198号6幢101室",point:"120.532942|31.274945",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"扬州市轮动方程汽车租赁有限公司",content:"扬州市邗江区三盛国际广场办公楼14楼1413室",point:"119.401233|32.384978",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"太原市轮动方程汽车租赁有限公司",content:"山西省太原市迎泽区建设南路632号盛饰大厦14层西101室",point:"112.593392|37.830494",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"太原市轮动方程汽车租赁有限公司阳泉分公司",content:"山西省阳泉市郊区李家庄乡李家庄村（阳泉旧机动车交易中心内）",point:"113.587013|37.897699",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"武汉惠淘车汽车服务有限公司",content:"武汉市江岸区滨江苑三期（汉江楼）1栋2单元2层2室",point:"114.324683|30.629281",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"常州市轮动方程汽车租赁有限公司",content:"常州市钟楼区北大街大庙弄2号13楼1305室",point:"119.957562|31.78619",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
    ,{title:"长沙轮动方程汽车贸易有限公司娄底分公司",content:"娄底市娄星区氐星路乐坪东街1104号",point:"112.007853|27.729252",isOpen:0,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
         ];

    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(json.icon);
            console.log(json.icon)
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });

            (function(){
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click",function(){
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open",function(){
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close",function(){
                    _marker.getLabel().show();
                })
                label.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
                if(!!json.isOpen){
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }

    initMap();//创建和初始化地图
  </script>

其中ak后面的值是网上免费获取的key值,效果如图