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 ...
随机推荐
- 微信公众号支付出现：“当前页面的URL未注册”
微信公众号H5调起支付时,点击支付按钮出现“当前页面的URL未注册”的提示.解决办法:由于2017年8月1日微信官方把关于支付的信息转移到了商户平台:公众平台微信支付公众号支付授权目录.扫码支付回调U ...
- day31 类的组合及继承，文件目录规范
Python之路,Day18 = Python基础18-面向对象继承与组合 类的继承 def talk(): print("I am come from talk..a") cla ...
- MFC打开/保存文件对话框:CFileDialog
MFC打开/保存文件对话框:CFileDialog CFileDialog 文件选择对话框的使用:首先构造一个对象并提供相应的参数,构造函数原型如下: CFileDialog::CFileDial ...
- LUOGU P2860 [USACO06JAN]冗余路径Redundant Paths （双联通，缩点)
传送门 解题思路 刚开始是找的桥,后来发现这样不对,因为一条链就可以被卡.后来想到应该缩点后找到度数为1 的点然后两两配对. #include<iostream> #include< ...
- 关于web前端网站优化
不知道是哪位大牛的文章,转过来嘻嘻. 作者:斯迪链接:https://www.zhihu.com/question/21658448/answer/18903129来源:知乎著作权归作者所有.商业转载 ...
- 尚学linux课程---6、linux命令介绍
尚学linux课程---6.linux命令介绍 一.总结 一句话总结: linux中命令的一般格式:命令关键字 选项 参数1 参数2 1.linux基本原则? 一切皆文件 配置文件保存为纯文本格式 2 ...
- python的起源及基本语句
一.Python的起源 Python是吉多范罗苏姆于1989年的圣诞节期间在阿姆斯特丹进行编写的,于1991年编写完成,Python是一门解释型弱类型的编程语言. Python在多个领域中都有应用,比 ...
- STM32F4X 关于MDK上虚拟串口调试
1. 下载安装VSPD 自行百度安装后,利用VSPD将PC上的两个虚拟串口连接起来.如图我将COM1 和COM2连接起来. a. 点击Addr pair. 可以看到Virtual ports上将两个虚 ...
- 左神算法进阶班1_1添加最少字符得到原字符N次
Problem: 给定一个字符串str1,只能往str1的后面添加字符变成str2. 要求1:str2必须包含两个str1,两个str1可以有重合,但是不能以同一个位置开头. 要求2:str2尽量短最 ...
- 如何使用Python-GnuPG和Python3 实现数据的解密和加密
介绍 GnuPG包提供用于生成和存储加密密钥的完整解决方案.它还允许您加密和签名数据和通信. 在本教程中,您将创建一系列使用Python 3和python-gnupg模块的脚本.这些脚本允许您对多个文 ...