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. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  2. 2019.12.10 break 标记

    class Demo01{ public static void main(String[] args) { int i=0; a:for(i=0;i<3;i++){ for(int j=0;j ...

  3. 浏览器端使用less

    一.思路 ①less无法在浏览器中直接使用,浏览器不能识别 ②通过less解析插件less.js(JavaScript插件)可以把less文件解析成css代码(下载地址) 二.具体应用 ①less.j ...

  4. C++之Lambda研究

    目录 目录 1 1. 前言 1 2. 示例1 1 3. 示例2 2 4. 示例3 3 5. 示例4 3 6. 示例5 6 7. 匿名类规则 6 8. 参考资料 7 1. 前言 本文代码测试环境为“GC ...

  5. SPA 首屏加载性能优化之 vue-cli3 拆包配置

    前言 现在已经是vue-cli3.x    webpack4.x 的时代了,但是网上很多拆包配置还是一些比较低版本的. 本文主要是分享自己的拆包踩坑经验. 主要是用了webpack4 的 splitC ...

  6. js无限轮播算法中干掉if判断

    无限轮播在网页应用中经常见到,这其中算法各有千秋,在学习算法分析一书中发现自增取余方法可以干掉一些不必要的if判断,具体代码如下: var arr= [1,2,3,4,5,6,7,8]; var in ...

  7. Android入门教程（三）

    对Android五大布局的描述,分别是 FrameLayout (框架布局),LinearLayout (线性布局),AbsoluteLayout (绝对布局),RelativeLayout (相对布 ...

  8. HTML | CSS | JavaScript 常见错误

    持续更新 超链接鼠标悬浮后的状态 a:hover 拼写 图片文件的路径问题

  9. python基础代码

    from heapq import *; from collections import *; import random as rd; import operator as op; import r ...

  10. ORACLE多条件的统计查询（case when）

    前几天要做一个统计查询的功能,因为涉及多张表,多种条件的统计分析.一开始便想到了UNION和IF语句,然后写了1000多行代码,就为了查30条数据觉得不应该. 然后就开始百度,多种条件下的统计.然后有 ...