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. Spring源码窥探之：@Profile

    Spring为我们提供的多环境启动 1. 配置类,注入三个不同环境的数据源,并加上注解 /** * description: 以下准备了三套不同环境的数据源 * * @author 70KG * @d ...

  2. 调用图灵API V2 遇到的坑

    1:遇到的第一个问题:跨域 解决办法: 第一种:使用query中的jsonp 可惜图灵要求post方法,而jsonp,只能使用get方法,才能跨域,失败 第二种:服务器添加header,可是我怎么去改 ...

  3. for循环：从键盘输入一个正整数n,

    #include<stdio.h>void main(){ int i,n,sum=0; //声明三个整型变量,并为变量sum初始化赋值为0// printf("Please e ...

  4. LeetCode 1215. Stepping Numbers

    原题链接在这里:https://leetcode.com/problems/stepping-numbers/ 题目: A Stepping Number is an integer such tha ...

  5. hasura skor 构建安装

    hasura skor 前边有介绍过是一个挺不错的event trigger 插件,我们可以用来进行事件通知处理 官方有提供构建的方法,但是有些还是会有点问题,所以结合构建碰到的问题,修改下 clon ...

  6. Lightning Web Components 组件生命周期（六）

    组件创建以及渲染流程 组件移除dom 处理流程 组件从dom 移除 组件中的disconnectedCallback() 方法被调用 子组件从dom 移除 每个子组件的disconnectedCall ...

  7. MongoDB---如何避免插入重复数据（pymongo）

    以下摘自pymongo文档: update_one(filter, update, upsert=False) update_many(filter, update, upsert=False) fi ...

  8. nodejs之express生成项目[windows平台]

    安装nvm,nvm下载地址   用于管理多个版本node,此处可省略! 安装nodejs,nodejs下载地址    淘宝镜像 安装cnpm命令,后面包可以使用cnpm命令安装,此处可省略,如果安装了 ...

  9. vim配置无插件

    其实,vim插件会影响编辑器的启动速度,虽然有些插件影响不大,我依然觉得不够,其实通过简易的状态栏,可以显示必要的信息,能自定义颜色和背景甚至透明就足够了. 一.自定义状态栏其实以下内容可以写在一行上 ...

  10. element-ui里面的table插入多张图片

    <el-form-item label="身份证正反面" label-width="120px"> <section v-if="t ...