Html5地理定位的使用
一、定位基础与原理
1.IP定位(定位不准确)
通过电脑的IP地址,定位到当前的位置。但是我们平常拿到的IP地址,一般是运营商发布的公网IP,只有一些涉密机构,才能够通过与运行商协商,才能拿到具体的IP。
2.运营商基站定位
只能大致定位当前的位置,是通过运营商的基站,能够确定当前接入的位置距离基站的距离。
3.GPS卫星定位
能够精确到厘米,是通过卫星电波,确定当前所在的位置。但是前提是:当前设备必须有GPS芯片。
二、地理定位的实现
地理定位API允许用户向web应用程序提供他们的位置,但是这个操作需要当前用户授权。
获取地理定位相关代码如下:
let geoloc=window.navigator.geolocation
geoloc.getCerrentPosition((result)=>{....},//定位成功后执行的回调方法(err)=>{...},//定位失败后执行的回调方法{timeout:5000} //定位参数:5000ms不返回结果,则抛出超时错误
)
案例:点击按钮,获取当前定位
高德地图API高德开放平台官网https://lbs.amap.com/tools/picker
<body><button id="btn">点我获取当前位置</button><script>btn.addEventListener('click', function() {//获取当前位置let geoloc = window.navigator.geolocationgeoloc.getCurrentPosition(//成功后执行的方法(success) => {console.log(success);},//失败后执行的方法(error) => {console.warn(error);},//定义超时时间{timeout: 50000})})</script>
</body>
注意:使用edge才能在后台看到位置,其他浏览器不会显示。
三、接入第三方位置服务平台——百度地图、高德地图、腾讯地图
一旦接入了第三方的位置服务平台,可以方便地在自己网页中嵌入地图控件。引入这些第三方位置服务后js后,还可以下显示地图内容,在地图中添加标记,导航,通过web服务接口,查询公交线路,查询周边位置信息,查询经纬度地地点描述字符串等功能。
3.1高德地图开放平台
腾讯位置服务 - 立足生态,连接未来腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案;有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。https://lbs.qq.com/
3.2使用地图JS API
(1)找到文档
(2)注册开发者账号
由于高德地图与支付宝账号是相同的,这里我们选择的是通过支付宝账号进行注册(比较方便)。
登录之后,会提示让你进行身份绑定,我们直接选择个人用户即可。
(3)登陆之后,在进入「应用管理」 页面「创建新应用」
(4)为应用“添加key”
四、准备页面
1. 如果是移动端开发(如果不是,则不需要),请在head
标签内添加viewport
meta
标签,以达到最佳的绘制性能;
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
2. 添加div
标签作为地图容器,同时为该div
指定id
属性;
<div id="container"></div>
3. 通过 css
为地图容器指定高度、宽度;
#container {width:300px; height: 180px; }
4. JSAPI key和安全密钥的使用(如果你后台使用Ngix,可以参考官方文档中的方案一
准备-入门-教程-地图 JS API v2.0 | 高德地图API高德开放平台官网https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 引入地图 JSAPI
脚本之前增加设置 JSAPI 安全密钥的脚本标签,并将您的安全密钥「您申请的安全密钥
」替换为您的安全密钥;(注意这个设置必须是在 JSAPI 的脚本加载之前进行设置,否则设置无效。)这里使用的是地图 JS API2.0版本。
<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'您申请的安全密钥',}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
五、快速上手
1、初次使用地图插件
<body><div id="container"></div><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: '15bb164e63e2d99c04365f8067c2ddb8',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=5db184c8c0523723427be7d0d03ddae3"></script><script>let geoloc = window.navigator.geolocationgeoloc.getCurrentPosition((success) => {let lat = success.coords.latitude //纬度let lng = success.coords.longitude //经度var map = new AMap.Map('container', {zoom: 15, //级别center: [lng, lat], //中心点坐标(前经后纬)viewMode: '3D' //使用3D视图});}), (err => {console.warn(err)}, {timeout: 5000})</script>
</body>
2、图层
先介绍一下“实时路况图层”
Html5地理定位的使用相关推荐
- html浏览位置坐标,HTML5教程 | HTML5地理定位(GeoLocation API)
HTML5 GeoLocation API(地理定位API)可以获取用户所在的地理位置.由于安全的原因,在使用HTML5 GeoLocation的时候,会弹出对话框让用户决定是否共享他们所在的位置,只 ...
- html5 定位 计算距离,HTML5 地理定位+地图 API:计算用户到商家的距离
背景 最近在做一个类似支付宝口碑商家的功能模块,其中有个功能就是计算出用户与商家的距离,如下图: 支付宝口碑商家页面截图 思路分析 1.商家选取店铺地址,将坐标经纬度存入数据库: 2.移动端定位当前用 ...
- html定位的实例,H5案例分享:基于浏览器的HTML5地理定位
基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...
- html5经纬度定位 源码_基于浏览器的HTML5地理定位
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个 ...
- HTML5地理定位用法
定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explo ...
- html坐标定位图解,HTML5地理定位实例
本文实例讲述了html5获取地理定位的方法,分享给大家供大家参考.具体方法如下: html5 获取坐标代码如下: 复制代码代码如下: test1.html 点击这个按钮,获得您的坐标: 试一下 var ...
- 小强的HTML5移动开发之路(18)——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- php html5定位,HTML HTML5 地理定位 - 闪电教程JSRUN
HTML5 Geolocation(地理定位)用于定位用户的位置. 亲自试一试:在谷歌地图上显示您的位置 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特 ...
- html5 解决手机休眠暂停gps,手机在Android上唤醒后,HTML5地理定位失败,导致GPS失败...
在Android的默认浏览器,一切工作正常,但我有一个奇怪的错误,这似乎只发生在Android设备上. 在第一页上加载浏览器问我,如果我接受分享我的位置和地理定位功能按预期工作. 但是,如果我让手机入 ...
最新文章
- h.264的NAL和VCL
- Objective-C设计模式——生成器Builder(对象创建)
- KMM+Compose 开发一个Kotlin多平台应用
- 易混淆的c++知识点
- labview嵌入c代码_Raspberry pi 4B+LabVIEW_2020amp;NXG部署WebApp
- python3反爬虫原理与绕过实战 网盘_Python 3反爬虫原理与绕过实战
- 如何模拟Spring bean(版本2)
- (85)FPGA显示激励(monitor)
- 第11章 使用Vsftpd服务传输文件
- Mysql整库导出导入
- while 循环 格式化输出
- 老妈叫下广场舞视频,想用python转换下视频格式flv转换为mp4
- 适合运动的耳机有哪些、最好用的五款运动型耳机推荐清单
- 中海岸扫盲之--什么是不干胶
- 实测对比:2层和4层板的干扰和辐射差异
- Opencv Python 综合练习1---读取银行卡卡号
- SQL-44 将id=5以及emp_no=10001的行数据替换成id=5以及emp_no=10005,其他数据保持不变,使用replace实现。...
- unity导入模型呈现紫色解决方法
- zynq Linux软件中断,zynq7010 在 linux 系统下 irq_f2p 中断驱动-Go语言中文社区
- 自创经典情感语录:只要有绿卡我可以装傻