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 ...
随机推荐
- python中与time模块和datetime模块相关操作
使用time模块计时程序运行时长 import time time_start = time.time() #程序主体部分 time_end = time.time() print('总耗时: ', ...
- Visual Studio 2010 error C2065: '_In_opt_z_' : undeclared identifier 编译错误
当用Visual Studio 2010 编译时 发生如下编译错误: 2>C:\Program Files (x86)\Microsoft Visual Studio 10.0\VC\inclu ...
- [kuangbin带你飞]专题一 简单搜索 - D - Fliptile
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...
- Maven Projects报错但对应的pom文件不报错解决方案
情景:dependencies中总有红波浪线报错,但是核对包名和路径,以及pom文件没有任何问题 项目可以正常运行,这种时候有强迫症的就不行了.... 解决方案是,根据波浪线提示的jar包,到pom文 ...
- Java之RabbitMQ(二)多mq配置
场景: springboot单项目,自身使用mq中间件处理一些业务需求,某些业务上又需要消费第三方mq消息,这时候需要我们单项目中配置多套mq,这时候,需要我们自定义多套mq相关连接工厂.模板.监听工 ...
- 爬虫所需要的文档和自动化文本driver下载地址,以及制作词云的文档，api等
Scrapy1.7.3文档 webdriver文档 webdriver下载地址 Chrom各版本下载地址 词云1.5文档 selenium中文文档 vue数据可视化文档 element开发组件 其他好 ...
- 面试系列17 redis cluster
1.redis cluster介绍 redis cluster (1)自动将数据进行分片,每个master上放一部分数据(2)提供内置的高可用支持,部分master不可用时,还是可以继续工作的 在re ...
- java_缓冲流(文件内容排序)
/** 案例:诸葛亮出师表文本排序 * 1.使用HashMap集合,k存储每行文本序,v存储文本 * 2.创建字符缓冲输入流,构造方法中绑定字符输入流 * 3.使用字符串缓冲输入流中的方法readLi ...
- 图片上传的ImageIO工具类
ImageIO类说明 最近的项目中遇到ImageIO,因此记录下这个类的用法 一.ImageIO: 这个类中的方法都是静态方法,可以用来进行简单的图片IO操作 1.读入的三种方法 public sta ...
- Luogu P2484 [SDOI2011]打地鼠(模拟+前缀和)
P2484 [SDOI2011]打地鼠 题意 题目描述 打地鼠是这样的一个游戏:地面上有一些地鼠洞,地鼠们会不时从洞里探出头来很短时间后又缩回洞中.玩家的目标是在地鼠伸出头时,用锤子砸其头部,砸到的地 ...