HTML5定位功能，实现在百度地图上定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5定位</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wqBXfIN3HkpM1AHKWujjCdsi"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<style type="text/css">
*{ margin: 0px; padding: 0px;}
body{text-align: center; height: %;overflow:hidden;}
#allmap{ width: %;height: %; position: absolute;}
</style>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
$(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,);
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 =
"<div><h4 style='margin:0 0 5px 0;padding:0.2em 0'>你当前的位置是：</h4>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber+"</p>" +
"</div>";
}
else{
var sContent =
"<div><h4 style='margin:0 0 5px 0;padding:0.2em 0'>你当前的位置是：</h4>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+ addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber+"</p>" +
"</div>";
}
var infoWindow = new BMap.InfoWindow(sContent);
map.openInfoWindow(infoWindow,point);
});
}
//gpsPoint：转换前坐标，第二个参数为转换方法，0表示gps坐标转换成百度坐标，callback回调函数，参数为新坐标点
BMap.Convertor.translate(point,,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;
})
</script>
</body>
</html>
HTML5定位功能，实现在百度地图上定位的更多相关文章
- 利用HTML5定位功能，实现在百度地图上定位（转）
原文:利用HTML5定位功能,实现在百度地图上定位 代码如下: 测试浏览器:ie11定位成功率100%,Safari定位成功率97%,(add by zhj :在手机上测试(用微信内置浏览器打开),无 ...
- 利用HTML5定位功能，实现在百度地图上定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
- Android 开发之集成百度地图的定位与地图展示
app 应用中,大多数应用都具有定位功能,百度定位就成了开发人员的集成定位功能的首选,近期也在做定位功能,可是发现百度真是个大坑啊, sdk 命名更新了,相关代码却不更新,害得我花费了非常长时间来研究 ...
- Android 百度地图SDK 定位
引用locSDK_6.1.3.jar,切记添加相应的so文件. 1.定位初始化,需要使用getApplicationContext() mLocClient = new LocationClient( ...
- Android 百度地图API 定位 导航
看看这个利用百度地图定位并实现目的地导航的Demo. 首先看实现效果: 进 入后首先会得到当前位置,在地图上显示出来.在输入框中输入目的地后,就会在地 ...
- Xamarin.Android 使用百度地图获取定位信息
最近做一个项目,web端使用百度地图,PDA使用手持机自带的GPS定位系统获取经纬度,然后再百度地图上显示该经纬度会有一定距离的差异,这里就像可乐的瓶子拧上雪碧的盖子,能拧的上却不美观.所以为了数据的 ...
- 在Fragment中实现百度地图，定位到当前位置（基于SDKv2.1.0）
使用最新版本的百度地图需要注意的几个地方: 1.libs文件夹下要有android-support-v4.jar.baidumapapi_v2_1_0.jar.locSDK_3.1.jar三个jar包 ...
- html5定位并在百度地图上显示
在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...
随机推荐
- yum 安装rpmbuild命令
yum install -y rpm-build [root@zhu2 bin]# rpm -qf rpmbuildrpm-build-4.8.0-27.el6.x86_64
- 总结加密、机密jar中的class
1.加密和解密部署到jboss中间件中的的单个class文件,原理:使用“java源程序加密解决方案(基于Classloader解密) (2014-07-13 11:31)”blog即可实现: imp ...
- 牛客多校第四场 A meeting 树的半径
题意: 有一棵树,树上有许多人,他们要聚会,找一个点使得所有人到这个点的距离的最大值最小. 题解: 首先,以一个有人的点为根,求一个生成树,删掉所有没有人的子树,保证所有的悬挂点(只连接一条边的点)都 ...
- System.Web.Mvc.HttpOptionsAttribute.cs
ylbtech-System.Web.Mvc.HttpOptionsAttribute.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutra ...
- centos7 将home目录空间扩容到根目录
[root@localhost ~]# umount /home/ [root@localhost ~]# lvremove /dev/mapper/centos-home Do you really ...
- Spring - 框架入门
认识 Spring 框架 Spring 框架是 Java 应用最广的框架,它的成功来源于理念,而不是技术本身,它的理念包括 IoC (Inversion of Control,控制反转) 和 AOP( ...
- 6_2.springboot2.x整合Druid和配置数据源监控
简介 Druid首先是一个数据库连接池.Druid是目前最好的数据库连接池,在功能.性能.扩展性方面,都超过其他数据库连接池,包括DBCP.C3P0.BoneCP.Proxool.JBoss Data ...
- C# EF去除重复列DistinctBy
在网上看了LinQ有DistinctBy方法,实际在用的时候并没有找到,后来参照了该网站才发现写的是拓展方法 https://blog.csdn.net/c1113072394/article/det ...
- 侧滑关闭Activity的解决方案——SwipeBackLayout
项目地址:ikew0ng/SwipeBackLayout: An Android library that help you to build app with swipe back gesture. ...
- MySQL5.1的安装过程
开始配置文件