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