html5获取自己定位的方法
html5获取自己定位的方法
直接用高德地图api 不要用百度地图api 不准确
<pre>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>浏览器定位</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.3&key=00955dce4bad4be3ec81058776e0e307"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<body>
<div style="width:30px; height:30px; background: #000; position: absolute;left:10px; top:10px;z-index: 9999" class="dss" onclick="getdingwei();"></div>
<div id="result"></div>
<div id='container' style="display: none"></div>
<div id="tip"></div>
<script type="text/javascript">
function regeocoder(lnglatXY) { //逆地理编码
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
geocoder_CallBack(result);
}
});
var marker = new AMap.Marker({ //加点
map: map,
position: lnglatXY
});
}
function geocoder_CallBack(data) {
var address = data.regeocode.formattedAddress; //返回地址描述
document.getElementById("result").innerHTML = address;
}
function getdingwei() {
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:无穷大
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
buttonPosition:'RB'
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
}
/***************************************
由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。
***************************************/
var map, geolocation;
//加载地图,调用浏览器定位服务
map = new AMap.Map('container', {
resizeEnable: true
});
//解析定位结果
function onComplete(data) {
lnglatXY = [data.position.getLng(), data.position.getLat()]; //已知点坐标
regeocoder(lnglatXY);
var str=['定位成功'];
str.push('经度:' + data.position.getLng());
str.push('纬度:' + data.position.getLat());
if(data.accuracy){
str.push('精度:' + data.accuracy + ' 米');
}//如为IP精确定位结果则没有精度信息
str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));
document.getElementById('tip').innerHTML = str.join('<br>');
}
//解析定位错误信息
function onError(data) {
document.getElementById('tip').innerHTML = '定位失败';
}
</script>
</body>
</html>
</pre>
直接点黑色方块就可以获取定位 pc和浏览器都支持
ps:别用谷歌浏览器的那个模拟手机端的机制测试 会定位失败
html5获取自己定位的方法的更多相关文章
- HTML5获取地理位置定位信息
如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...
- HTML5 总结-地理定位-6
HTML5 地理定位 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Int ...
- html5获取地理位置信息API
html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...
- 【Demo】HTML5获取地理位置
HTML5获取地理位置简单实例 实例1--获取地理位置的经纬度: <!DOCTYPE html> <html> <head> <meta charset=& ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- springMvc源码学习之:spirngMVC获取请求参数的方法2
@RequestParam,你一定见过:@PathVariable,你肯定也知道:@QueryParam,你怎么会不晓得?!还有你熟悉的他 (@CookieValue)!她(@ModelAndView ...
- Android使用百度定位SDK 方法及错误处理
之前我的项目中的位置定位使用的是基站方法,使用的Google提供的API,但是前天中午突然就不返回数据了,到网上搜了一下才知道,Google的接 口不提供服务了,基于时间紧迫用了百度现有的SDK,但是 ...
- Java获取文件大小的正确方法(转)
Java中获取文件大小的正确方法 2014-03-28 14:03 64507人阅读 评论(9) 收藏 举报 分类: Java笔记(36) 研究成果(42) 版权声明:本文为博主原创文章,未经博 ...
- Android使用百度定位SDK方法及错误处理
下面事例是使用Android平台的部分代码.对于这个平台百度的开放人员已经写了完整的demo,把工程导入到eclipse中之后一般没有错误,如果报错的话,eclipse也会给出提示.一般可以通过将pr ...
随机推荐
- linux中添加自定义命令
centos下设置alias别名,比较简单,例如: vim /root/.bashrc addalias rm='rm -i' Linux alias设置指令的别名命令详解 功能说明:设置指令的别名. ...
- GSM/GPRS模块 AT指令集C语言编程——基于有方M660+和MSP430单片机
GSM/GPRS芯片是手机中负责收发短信.拨打电话以及访问GPRS网络的核心器件.有方M660+为深圳有方公司生产的一款超小封装的GSM/GPRS工业无线模块,可以提供高品质的语音.短信.数据业务等功 ...
- python的readline() 和readlines()
.readline() 和 .readlines() 之间的差异是后者一次读取整个文件,象 .read() 一样..readlines() 自动将文件内容分析成一个行的列表,该列表可以由 Python ...
- LeetCode 1027. Longest Arithmetic Sequence
原题链接在这里:https://leetcode.com/problems/longest-arithmetic-sequence/ 题目: Given an array A of integers, ...
- 浅谈H5图片中object-fit的属性及含义/ 小程序image mode属性中scaleToFill,aspectFit,widthFix等类似
我们在H5中对于图片的属性包含如下: object-fit属性有哪些值呢? object-fit: fill; object-fit: contain; object-fit: cover; o ...
- POJ 1436.Horizontally Visible Segments-线段树(区间更新、端点放大2倍)
水博客,水一水. Horizontally Visible Segments Time Limit: 5000MS Memory Limit: 65536K Total Submissions: ...
- 意图Intent
意图点击官方链接 前言 对意图Intent,学习安卓需掌握.以官方链接:http://www.android-doc.com/reference/android/content/Intent.html ...
- 网络开发Socket和ServerSocket
已经发表个人公众号 Socket和ServerSocket Socket为"孔"或"插座",创建Socket,打开连接Socket的输入或输出流,对Socket ...
- Dense Semantic Labeling with Atrous Spatial Pyramid Pooling and Decoder for High-Resolution Remote Sensing Imagery(高分辨率语义分割)
对 Potsdam and Vaihingen 公开数据集进行处理,得到了SOTA的结果,超越DeepLab_v3+,提出的网络结构如下:结合了ASPP和FCN,UNet
- mysql 组合聚集函数
mysql> select * from table1; +----------+------------+-----+---------------------+ | name_new | t ...