设为首页 加入收藏

TOP

利用HTML5定位功能实现在百度地图上定位
2014-11-23 22:10:05 来源: 作者: 【 】 浏览:20
Tags:利用 HTML5 定位 功能 现在 百度 地图

利用HTML5定位功能,实现在百度地图上定位


代码如下:






HTML5定位


<script type="text/java script" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">


<script type="text/java script" src="http://api.map.baidu.com/api v=2.0&ak=wqBXfIN3HkpM1AHKWujjCdsi">


<script type="text/java script" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js">






<script type="text/java script">


$(function(){


if(supportsGeoLocation()){


alert("你的浏览器支持 GeoLocation.");


}else{


alert("不支持 GeoLocation.")


}


// 检测浏览器是否支持HTML5


function supportsGeoLocation(){


return !!navigator.geolocation;


}


// 单次位置请求执行的函数


function getLocation(){


navigator.geolocation.getCurrentPosition(mapIt,locationError);


}


//定位成功时,执行的函数


function mapIt(position){


var lon = position.coords.longitude;


var lat = position.coords.latitude;


// alert("您位置的经度是:"+lon+" 纬度是:"+lat);


var map = new BMap.Map("allmap");


var point = new BMap.Point(""+lon+"",""+lat+"");


map.centerAndZoom(point,19);


var gc = new BMap.Geocoder();


translateCallback = function (point){


var marker = new BMap.Marker(point);


map.addOverlay(marker);


map.setCenter(point);


gc.getLocation(point, function(rs){


var addComp = rs.addressComponents;


if(addComp.province!==addComp.city){


var sContent =


"

你当前的位置是:

" +


"

"+addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber+"

" +


"

";}


else{


var sContent =


"

你当前的位置是:

" +


"

"+ addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber+"

" +


"

";


}


var infoWindow = new BMap.InfoWindow(sContent);


map.openInfoWindow(infoWindow,point);


});


}


BMap.Convertor.translate(point,0,translateCallback);


}


// 定位失败时,执行的函数


function locationError(error)


{


switch(error.code)


{


case error.PERMISSION_DENIED:


alert("User denied the request for Geolocation.");


break;


case error.POSITION_UNAVAILABLE:


alert("Location information is unavailable.");


break;


case error.TIMEOUT:


alert("The request to get user location timed out.");


break;


case error.UNKNOWN_ERROR:


alert("An unknown error occurred.");


break;


}


}


// 页面加载时执行getLocation函数


window.onload = getLocation;


})





测试浏览器:ie11定位成功率100%,Safari定位成功率97%。其它浏览器暂时不行,HTML5获取不了地理位置信息。


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇OpenGL 4.4 和 Android 下一篇C#数学运算表达式解释器

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: