百度地图 JavaScript API 说明

http://developer.baidu.com/map/jsdemo.htm

基础应用

1.创建地图： var map = new BMap.Map(“divid”);

2.创建坐标点：var point = new BMap.Point(“经度”,”纬度”);

3.设置视图中心点：map.centerAndZoom(point,size);

4.激活滚轮调整大小功能：map.enableScrollWheelZoom();

5.添加控件：map.addControl(new BMap.Xxx());

6.添加覆盖物：map.addOverlay();

控件介绍

1.NavigationControl：缩放地图的控件，默认在左上角；

2.OverviewMapControl：地图的缩略图的控件，默认在右下方；

3.ScaleControl：地图显示比例的控件，默认在左下方；

4.MapTypeControl：地图类型控件，默认在右上方；

map.addControl()方法添加控件；

1.标注：Marker

(1)在point处添加标注：var marker = new BMap.Marker(point);

(2)添加覆盖物：map.addOverlay(marker);

(3)激活标注的拖拽功能：marker.enableDragging();

(4)为标注添加事件：marker.addEventListener(“名称”,function(){

//点击标注后的事件

});

(5)删除覆盖物：map.removeOverlay(marker);

(6)销毁标注：marker.dispose();

2.信息窗口：InfoWindow

(1)在某个特定的位置创建一个信息窗口：var infowindow = new BMap.InfoWindow(“内容”,{width:250,height:100,title:”hello”});

(2)在地图中央打开信息窗口：map.openInfoWindow(infoWindow,map.getCenter());

获取坐标：
http://developer.baidu.com/map/static/doc/Reference_of_Baidu_JavaScript_API_v1.4.pdf
http://developer.baidu.com/map/static/doc/Guide_for_Baidu_JavaScript_API_v1.4.pdf

http://api.map.baidu.com/lbsapi/getpoint/index.html
http://api.map.baidu.com/lbsapi/creatmap/index.html

test code：

        

function initialize() {
            var map = new BMap.Map('map');
            var point = new BMap.Point(112.550864,37.890277);
            map.centerAndZoom(point, 12);
            /*
            *  缩放控制按钮
            *  BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件。
            *  BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件。
            *  BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能。
            *  BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能。
            * */
            var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM}
            map.addControl(new BMap.NavigationControl(opts));
            /*
             *  那个破尺子  可以调整它所在的位置
             * */
            //var opts = {offset: new BMap.Size(15, 5)}
            //map.addControl(new BMap.ScaleControl(opts));
            /*
            *   此类表示缩略地图控件  就是右下角的那个小地图
             */
            map.addControl(new BMap.OverviewMapControl());
            /*
             * 显示其它类型的地图  三维 卫星
             */
            //map.addControl(new BMap.MapTypeControl());
            //map.setCurrentCity("北京");

/*            map.addEventListener('click', function(e){
                alert(e.point);
            });*/

            /*
            * 从这里我们标注地图
             */
           var icon = new BMap.Icon('pin.png', new BMap.Size(20, 32), {
                anchor: new BMap.Size(10, 30)
            });
            var infowindow = new BMap.InfoWindow("内容",{width:250,height:100,title:"hello"});
            //map.openInfoWindow(infowindow,map.getCenter());

            var myLabel = new BMap.Label("海辉房产 21000元",     //为lable填写内容
                    {offset:new BMap.Size(-60,-60),                  //label的偏移量，为了让label的中心显示在点上
                        position:point});                                //label的位置

            myLabel.setTitle("我是文本标注label");               //为label添加鼠标提示
            map.addOverlay(myLabel);                             //把label添加到地图上
            var circle = new BMap.Circle(point,5000);
            map.addOverlay(circle);
            var mkr =new BMap.Marker(point, {
                //icon: icon,
                enableDragging: true,
                raiseOnDrag: true
            });
            map.addOverlay(mkr);
            mkr.addEventListener('dragend', function(e){
                //这里可以把获取到的经纬度存到数据库里去
                console.log(e.point.lng +', '+e.point.lat);
            })


        }

        function loadScript() {
            var script = document.createElement("script");
            script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;