百度地图API

    百度地图API当然在学习更加清晰，我只是做一下我这2天研究一个总结。

    首先，应该在上面的链接申请一个你的密钥。

    接着，显示百度地图，先上代码再解释：

   

1    2    3    4 
        5 
        6    7   12 16   17  18   19 
     
 20   27   28 

 

var map=new BMap.Map('container');

     创建地图实例

     这里通过new 创建一个地图实例，其中参数可以是id也可以是元素对象,用于在页面上展现地图，所以给html元素设置了下面的样式,使得地图充满 整个浏览器窗口.

 

 

 

var point=new BMap.Point(116.404,39.915);

我们通过BMap命名空间下的的Point类创建一个坐标点。116.404表示经度，39.915表示纬度。

 

 

map.centerAndZoom(point,15);

 对地图进行初始化,BMap.Map.centerAndZoom()方法要求2个参数，一个中心点，一个是地图的级别。只有进行了初始化以后才会有接下来对地图的操作。

 

 添加控件

//控件参数设置 size typevar opts={offset:new BMap.Size(400,400),type: BMAP_NAVIGATION_CONTROL_ZOOM}//添加控件map.addControl(new BMap.NavigationControl(opts)); //地图平移缩放控件map.addControl(new BMap.OverviewMapControl());    //缩略地图控件map.addControl(new BMap.ScaleControl(opts));      //比例尺控件

控件种类，控件位置，以及控件配置请详见百度控件API；

自定义控件:

8 //自定义控件 9 function selfControll(){10        this.defaultAnchor=BMAP_ANCHOR_TOP_RIGHT;11        this.defaultOffset=new BMap.Size(200,200); 12 }13 selfControll.prototype=new BMap.Control();14 selfControll.prototype.initialize=function(map){15      div=document.createElement("div");16      div.appendChild(document.createTextNode("放大2级"));17      div.style.cursor='pointer';18      div.style.backgroundColor='red';19      div.οnclick=function(e){20          map.zoomTo(map.getZoom()+2);21      }22      //map.getContainer().id   --返回container23     map.getContainer().appendChild(div);24     return div;25 }26 var selfControll=new selfControll();27 map.addControl(selfControll);

  1,定义一个自定义的构造函数。2，设置自定义控件构造函数的prototype属性为Control的实例，以便继承控件基类。3,实现initialize()方法.4,实例一个自定义控件，向地图中添加。 

 添加覆盖物

覆盖物:所有叠加或覆盖到地图的内容，统称地图覆盖物。

地图集中覆盖物:

Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。

Marker：标注表示地图上的点，可自定义标注的图标。

Label：表示地图上的文本标注，您可以自定义标注的文本内容。

Polyline：表示地图上的折线。

Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。

Circle: 表示地图上的圆。

InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。

添加标注

var marker=new BMap.Marker(point); map.addOverlay(marker);

   红色的就是默认的标注.

添加折线

//添加折线 var polyline = new BMap.Polyline([       new BMap.Point(116.399, 39.910),       new BMap.Point(116.405, 39.920)     ],     {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}     );     map.addOverlay(polyline);

Polyline表示地图上的折线覆盖物。它包含一组点，并将这些点连接起来形成折线。

 添加信息类

var opts1={              width:250,              height:100,              title:'hello'            }       var infoWindow=new BMap.InfoWindow('world',opts1);       map.openInfoWindow(infoWindow,map.getCenter());

使用infoWindow来创建一个信息窗实例，一个地图上只能有一个信息窗处于打开状态

 

 

事件监听

百度地图API中大部分对象都含有addEventListener,可以通过该方法来监听对象的事件

点点击地图时触发事件:

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    map.addEventListener("click", function(){     alert("您点击了地图。");    });

当拖动地图后事件:

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    map.addEventListener("dragend", function(){     var center = map.getCenter();     alert("地图中心点变更为：" + center.lng + ", " + center.lat);    })

当地图缩放后事件,

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    map.addEventListener("zoomend", function(){     alert("地图缩放至：" + this.getZoom() + "级");    });

 移除事件

每一个API对象都提供了removeEventListener用来移除事件监听函数

var map = new BMap.Map("container");    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    function showInfo(e){     alert(e.point.lng + ", " + e.point.lat);     map.removeEventListener("click", showInfo);    }    map.addEventListener("click", showInfo);

用户第一次点击地图会触发事件监听函数，在函数内部对事件监听进行了移除，因此后续的点击操作则不会触发监听函数。

 

 服务配置

//BMap.LocalSearch提供了若干配置方法，通过它们可以自定义搜索服务的行为以满足您的需求。    var local=new BMap.LocalSearch('北京市',{       renderOptions: {map: map,autoViewport: true},pageCapacity: 9    });         //结果面板 通过设置BMap.LocalSearchOptions.renderOptions.panel属性，可以为本地搜索对象提供一个结果列表容器，搜索结果会自动添加到容器元素中    /*var local=new BMap.LocalSearch(map,{        renderOptions:{map:map,panel:'results'}    });    local.search("中关村");*/        //数据接口、    //BMap.LocalSearch和BMap.LocalSearchOpions类提供了若干设置回调函数的接口，通过它们可以得到搜索结果的数据信息.onSearchComplete包含了每一次搜索结果的数据信息BMap.LocalSearch.getStatus()方法判断搜素是否成功或者得到错误信息    options={        onSearchComplete:function(results){            if(local.getStatus()==BMAP_STATUS_SUCCESS){                var s=[];                for (var i = 0; i 

 

全景控件

//点击全景控件会进入全景图，点击全景图右上角的关闭按钮会退回到普通地图。         //通过全景控件可以从普通地图进入全景地图，添加全景控件的方式同添加工具条等控件类似           var stCtrl=new BMap.PanoramaControl();          stCtrl.setOffset(new BMap.Size(20,20));          map.addControl(stCtrl);                //设置导航控件          var panorama=new BMap.Panorama('panorama',{navigationControl:false,linksControl:false});          Panorama.setOptions({navigationControl:false,linksControl:false});        //设置道路指引控件        //通过PanoramaOption指定          var panorama = new BMap.Panorama('panorama', {linksControl:false}); //默认为显示道路指引控件，默认值为true        //通过setOptions方法指定          Panorama.setOptions({linksControl:false});