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获取自己定位的方法的更多相关文章

  1. HTML5获取地理位置定位信息

    如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...

  2. HTML5 总结-地理定位-6

    HTML5 地理定位 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Int ...

  3. html5获取地理位置信息API

    html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...

  4. 【Demo】HTML5获取地理位置

    HTML5获取地理位置简单实例 实例1--获取地理位置的经纬度: <!DOCTYPE html> <html> <head>  <meta charset=& ...

  5. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  6. springMvc源码学习之：spirngMVC获取请求参数的方法2

    @RequestParam,你一定见过:@PathVariable,你肯定也知道:@QueryParam,你怎么会不晓得?!还有你熟悉的他 (@CookieValue)!她(@ModelAndView ...

  7. Android使用百度定位SDK 方法及错误处理

    之前我的项目中的位置定位使用的是基站方法,使用的Google提供的API,但是前天中午突然就不返回数据了,到网上搜了一下才知道,Google的接 口不提供服务了,基于时间紧迫用了百度现有的SDK,但是 ...

  8. Java获取文件大小的正确方法(转)

    Java中获取文件大小的正确方法 2014-03-28 14:03 64507人阅读 评论(9) 收藏 举报  分类: Java笔记(36)  研究成果(42)  版权声明:本文为博主原创文章,未经博 ...

  9. Android使用百度定位SDK方法及错误处理

    下面事例是使用Android平台的部分代码.对于这个平台百度的开放人员已经写了完整的demo,把工程导入到eclipse中之后一般没有错误,如果报错的话,eclipse也会给出提示.一般可以通过将pr ...

随机推荐

  1. python练习题（四）

    题目: 根据一个字符串返回一个ip数组,按照ip最后一位排序, 字符串: str = 'ss192.0.0.12?!289.0.0.1!0.0.0.0!192.163.10.28?192.0.0.5' ...

  2. Linux下安装Fiddler

    1.首先,你要有个Mono环境,在Ubuntu环境下安装很简单,输入: sudo apt-get install mono-complete 2.下载一个最新的Fiddler for Mono版本,下 ...

  3. Node.js是什么？提供了哪些内容？

    什么是Node.js? Node.js是基于Chrome V8 引擎的 JavaScript运行时(运行环境). Node.js提供了哪些内容? Node.js运行时,JavaScript代码运行时的 ...

  4. Basic concepts of docker/kubernete/kata-container

    Kubereters An open-source system for automating deployment, scaling, and management of containerized ...

  5. LeetCode 1059. All Paths from Source Lead to Destination

    原题链接在这里:https://leetcode.com/problems/all-paths-from-source-lead-to-destination/ 题目: Given the edges ...

  6. 微信小程序弹窗

    wxml <view class="content"> <button bindtap="popSuccessTest">成功提示弹窗& ...

  7. mysql distinct()函数 去重

    mysql> select * from table1; +----------+------------+-----+---------------------+ | name_new | t ...

  8. windows 10下启用docker的k8s集群

    安装Docker Desktop后,由于国内无法下载到Kubernete的文件,在Docker Desktop设置里勾选启用Kubernete一直显示”Kubernete is starting”状态 ...

  9. [开源] FreeSql.AdminLTE.Tools 根据实体类生成后台管理代码

    前言 FreeSql 发布至今已经有9个月,功能渐渐完善,自身的生态也逐步形成,早在几个月前写过一篇文章<ORM 开发环境之利器:MVC 中间件 FreeSql.AdminLTE>,您可以 ...

  10. Spring Boot 面试，一个问题就干趴下了！（下）

    前些天栈长在Java技术栈微信公众号分享一篇文章:Spring Boot 面试,一个问题就干趴下了!,看到大家的留言很精彩,特别是说"约定大于配置"的这两个玩家. 哈哈,上墙的朋友 ...