小白入门---百度地图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;})();