利用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: 100%;overflow:hidden;}
#allmap{ width: 100%;height: 100%; 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,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 =
"<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);
});
}
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;
})
</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 百度地图API 定位 导航
看看这个利用百度地图定位并实现目的地导航的Demo. 首先看实现效果: 进 入后首先会得到当前位置,在地图上显示出来.在输入框中输入目的地后,就会在地 ...
- Android 开发之集成百度地图的定位与地图展示
app 应用中,大多数应用都具有定位功能,百度定位就成了开发人员的集成定位功能的首选,近期也在做定位功能,可是发现百度真是个大坑啊, sdk 命名更新了,相关代码却不更新,害得我花费了非常长时间来研究 ...
- Android 百度地图SDK 定位
引用locSDK_6.1.3.jar,切记添加相应的so文件. 1.定位初始化,需要使用getApplicationContext() mLocClient = new LocationClient( ...
- 在Fragment中实现百度地图，定位到当前位置（基于SDKv2.1.0）
使用最新版本的百度地图需要注意的几个地方: 1.libs文件夹下要有android-support-v4.jar.baidumapapi_v2_1_0.jar.locSDK_3.1.jar三个jar包 ...
- Xamarin.Android 使用百度地图获取定位信息
最近做一个项目,web端使用百度地图,PDA使用手持机自带的GPS定位系统获取经纬度,然后再百度地图上显示该经纬度会有一定距离的差异,这里就像可乐的瓶子拧上雪碧的盖子,能拧的上却不美观.所以为了数据的 ...
- html5定位并在百度地图上显示
在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...
随机推荐
- Blogging with github Pages
参考: 阮大大:搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门 使用BitBucket和FTPloy私有Jekyll源码 http://www.pchou.inf ...
- ORACLE动态采样分析
td {border:solid #9ec9ec; border-width:0px 1px 1px 0px; padding:4px 0px;} table {border:1px solid #9 ...
- Ignite 配置更新Oracle JDBC Drive
如果使用Oracle 12C 作为Ignite 的Repository的话,在Repository Createion Wizard的配置过程中,会出现ORA-28040:No matc ...
- YourSQLDba版本升级总结
在使用YourSQLDba做数据库备份.维护时,像其它软件一样,版本升级是不可避免的.因为YourSQLDba一直在不停更新版本.扩展功能.下面介绍一下升级YourSQLDba时的具体步骤和一些注意事 ...
- 为什么 MySQL 回滚事务也会导致 ibd 文件增大？
一个简单的测试: start transaction; insert into tb1 values(3, repeat('a', 65000),'x',1); --commit; rollback; ...
- 在Windows上安装虚拟机详细图文教程
用虚拟机来安装最新的软件,安装最新的系统等等比较保险,可以避免安装不顺利影响自己原来的系统和应用,想尝鲜又担心自己完全更换系统不适应的朋友可以尝试. 虚拟机下载:https://yunpan.cn/c ...
- 【转载】 Java线程面试题 Top 50
Java线程面试题 Top 50 不管你是新程序员还是老手,你一定在面试中遇到过有关线程的问题.Java语言一个重要的特点就是内置了对并发的支持,让Java大受企业和程序员 的欢迎.大多数待遇丰厚的J ...
- 学习Linux的编码风格
对于编码,每个码农或许都会有自己的一套风格,很多人可能对编码风格压根就不关心,因为最终编译器编译出来的目标代码并不会受影响.但是在开发一个大型项目时,花费时间成本最多的永远是开发者们之间的沟通与交流. ...
- 基于Fast Bilateral Filtering 算法的 High-Dynamic Range(HDR) 图像显示技术。
一.引言 本人初次接触HDR方面的知识,有描述不正确的地方烦请见谅. 为方便文章描述,引用部分百度中的文章对HDR图像进行简单的描述. 高动态范围图像(High-Dynamic Range,简称HDR ...
- Hibernate组件映射
Hibernate联合主键映射以及组件映射 在Hibernate中联合主键的形成有两种可能:一种是由多对多映射形成的,多对多映射会形成第三张表,一般来说第三张表的主键是由其他两张表的主键构成的(比如学 ...