小白入门---百度地图JavaScript API 类使用

使用WEB获取地理位置信息

1、JS中获取位置信息的原生方法：

1.使用navigator对象：由于请求的是谷歌地图，所以不稳定的时候大部分时候不会请求到数据，会报错。

navigator.geolocation.getCurrentPosition(function(result){//获取当前地址
    console.log(result);
},function(error){
    console.log(error);
});
var watchID=navigator.geolocation.watchPosition(unction(result){//持续获取地址
    console.log(result);
},function(error){
    console.log(error);
});
navigator.geolocation.clearWatch(watchID);//清除监听方法，百度地图里面没有这个方法

2.JS使用百度地图API案例。

》步骤及代码：

1.使用script标签在HTML中引入百度地图SDK;
2.在body中创建创建地图容器id名为map的元素；
3.简单设置HTML文档和map的样式；
4.创建地图对象,初始化地图(具体js代码如下)

function init(){
//创建地图对象
    var opt={mapType:BMAP_NORMAL_MAP};//创建地图对象的时候可设置的可选项
    var map=new BMap.Map("map",opt);//API使用BMap作为命名空间，所有类均在该命名空间之下
//初始化地图
//  map.centerAndZoom("北京",12);//设置中心点坐标（即可以是经纬度point也可以是地名）和地图级别（默认12）
    var point=new BMap.Point(116.401481,39.914776);
    map.centerAndZoom(point,10);
    map.disableDoubleClickZoom();//禁用双加放大方法
    map.disableDragging();//禁止拖拽
    map.addEventListener("rightclick",function(){
        map.enableDragging();//单击右键启用拖拽
    });
    var location=new BMap.GeolocationControl({locationIcon:new BMap.Icon("img/icon.jpg",new BMap.Size(30, 30))});//创建定位控件
    location.setAnchor(BMAP_ANCHOR_TOP_RIGHT);//直接在control类里面调用setAnchor方法改变定位控件位置
    location.setOffset(new BMap.Size(100, 50));
    map.addControl(location);
    map.addEventListener("rightdblclick",function(){//右键双击控制定位控件显示和隐藏
        location.isVisible()?location.hide():location.show();
    });
    setTimeout(function(){
        location.location();        
    },3000);//3秒后自动定位
    location.addEventListener("locationSuccess",function(){
        var add=location.getAddressComponent();
        console.log(add);//定位成功打印具体地址信息
    });
    var mapTypeControl=new BMap.MapTypeControl({type:BMAP_MAPTYPE_CONTROL_DROPDOWN,mapType:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]});//添加一个地图类型的控件
    map.addControl(mapTypeControl);
    var copyrightControl=new BMap.CopyrightControl({anchor:BMAP_ANCHOR_TOP_RIGHT,offset:new BMap.Size(100, 100)});  //版权控件
    map.addControl(copyrightControl);
    copyrightControl.addCopyright({id: 1, content: "<h1 style='background:yellow'>我是王大炮小姐啊~~~</h1>", bounds: map.getBounds()});//添加版权信息
    var panoramaControl=new BMap.PanoramaControl();//添加一个全景控件
    map.addControl(panoramaControl);
    var sControl=new UMap.SControl();//自定义按钮
    map.addControl(sControl);
    var icon=new BMap.Icon("img/icon.png",new BMap.Size(40,40));
    icon.setImageSize(new BMap.Size(40,40));
    var maker=new BMap.Marker(point,{
        icon:icon,
        offset:new BMap.Size(20,15)     
        });
    map.addOverlay(maker);
    map.addEventListener("dblclick",function(event){        
        var icon=new BMap.Icon("img/icon.png",new BMap.Size(40,40));
        icon.setImageSize(new BMap.Size(40,40));
        var maker=new BMap.Marker(event.point,{
            icon:icon
        });     
        map.addOverlay(maker);
        maker.setAnimation(BMAP_ANIMATION_BOUNCE);//要放在addOverlay后面，所有都可以跳
    });
}
init();

5.自定义一个控件的JS方法

//自定义一个控件，加减按钮控制地图放大和缩小
window.UMap=window.UMap||{};//定义一个自己的命名空间UMap
(function(){
    function SControl(){
        this.defaultAnchor= BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset=new BMap.Size(50,50);
    }
    SControl.prototype=new BMap.Control();//所有自定义的控件也是基于基类Control的
    SControl.prototype.initialize=function(map){
        var container=document.createElement("div");
        var minbtn=document.createElement("button");
        var maxbtn=document.createElement("button");
        minbtn.textContent=" -- ";
        maxbtn.textContent=" ++ ";
        minbtn.style.cssText=maxbtn.style.cssText="font-size: 25px;";
//      minbtn.onclick = function(){
//          map.setZoom(map.getZoom()-1);
//      };
//      maxbtn.onclick = function(){
//          map.setZoom(map.getZoom()+1);
//      };
        function action(){//添加点击事件
            this.textContent==="++"?map.zoomIn():map.zoomOut();
        }
        minbtn.onclick=action;
        maxbtn.onclick=action;
        container.appendChild(minbtn);
        container.appendChild(maxbtn);
        map.getContainer().appendChild(container);//使用map.getContainer()方法可获得地图容器元素
        return container;//自定义控件时需要实现此方法，并将元素的DOM元素在该方法中返回。
    };
    UMap.SControl=SControl;
})();