百度地图javascript api实现定位

百度地图API:http://api.map.baidu.com/lbsapi/cloud/

开发前需要先申请密钥(key)

在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以Chrome浏览器为例,如果您允许Chrome浏览器与网站共享您的位置,Chrome浏览器会向Google位置服务发送本地网络信息,估计您所在的位置。然后,浏览器会与请求使用您位置的网站共享您的位置。

经过测试发现,目前的浏览器定位技术依然不靠谱,误差很大,基本没有实用性。

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<styletype="text/css">

body,html,#allmap{width:100%;height:100%;overflow:hidden;margin:0;}

#l-map{height:100%;width:78%;float:left;border-right:2pxsolid#bcbcbc;}

#r-result{height:100%;width:20%;float:left;}

</style>

<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=1.5&ak=8704bb2733e7bbfd5fbd7ddb73861d87"></script>

<title>地图官网展示效果</title>

</head>

<body>

<divid="allmap"></div>

</body>

</html>

<scripttype="text/javascript">

varmap=newBMap.Map("allmap");//创建Map实例

varenableBaiduLocation=false;//暂时不用百度自带的浏览器定位接口

if(enableBaiduLocation){

varpoint=newBMap.Point(116.331398,39.897445);

map.centerAndZoom(point,15);

vargeolocation=newBMap.Geolocation();

geolocation.getCurrentPosition(function(r){

if(this.getStatus()==BMAP_STATUS_SUCCESS){

varmk=newBMap.Marker(r.point);

map.addOverlay(mk);

map.panTo(r.point);

alert('您的位置:'+r.point.lng+','+r.point.lat);

}

else{

alert('failed'+this.getStatus());

}

},{enableHighAccuracy:true})

}else{

if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(successFunction,errorFunction,{

enableHighAcuracy:true,

timeout:5000

});

}else{

alert('ItseemslikeGeolocation,whichisrequiredforthispage,isnotenabledinyourbrowser.Pleaseuseabrowserwhichsupportsit.');

}

}

functionsuccessFunction(position){

varlatitude=position.coords.latitude;//维度

varlongitude=position.coords.longitude;//经度

varcurPoint=newBMap.Point(longitude,latitude);

map.centerAndZoom(curPoint,15);//初始化地图,设置中心点坐标和地图级别

map.addControl(newBMap.NavigationControl());//添加平移缩放控件

map.addControl(newBMap.ScaleControl());//添加比例尺控件

map.addControl(newBMap.OverviewMapControl());//添加缩略地图控件

map.enableScrollWheelZoom();//启用滚轮放大缩小

map.addControl(newBMap.MapTypeControl());//添加地图类型控件

map.setCurrentCity("成都");//设置地图显示的城市此项是必须设置的

varmarker1=newBMap.Marker(curPoint);//创建标注

map.addOverlay(marker1);//将标注添加到地图中

map.addEventListener("click",function(e){

alert("点击坐标:"+e.point.lng+","+e.point.lat);

});

}

functionerrorFunction(){

alert("error");

}

</script>

相关推荐