H5 API 地理定位

地理定位在日常生活中应用比较广泛，例如，互联网打车、在线地图等。在HTML 5的规范中，增加了获取用户地理位置信息的接口Geolocation，开发者可以通过经纬度来获取用户的地理位置信息，Geolocation接口的特点如下。

  • Geolocation接口封装了获取位置信息的技术细节。
  • 开发者不需要关心信息的来源，只需关注如何使用即可，这极大地简化了开发的难度。
  • 目前，该接口已经得到了大部分浏览器的支持，如Firefox、IE 9、Opera、Safari和Chrome等。
  • 对于拥有GPS的设备，定位会更加准确，如iPhone和Android手机等。

navigator.geolocation对象提供了getCurrentPosition()方法来获取当前地理位置。

其中，navigator是浏览器的内置对象。

当getCurrentPosition()方法被调用时，会发起一个异步请求，浏览器会去调用底层的硬件来更新当前的位置信息。

position对象中的coords属性包含的信息如表所示。

属性名 描述
latitude 十进制表示的纬度坐标
longitude 十进制表示的经度坐标
accuracy 当前经纬度信息的精度（单位米）
altitude 海拔高度（单位米）
altitudeAccuracy 当前海拔高度的精度
heading 当前设备的朝向（以弧度为单位），从正北开始计算

获取当前位置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <p id="demo">获得您的坐标：</p>

    <button onclick="getLocation()">试一下</button>

    <script>

        var x = document.getElementById('demo');

        function getLocation() {

            if (navigator.geolocation) {

                navigator.geolocation.getCurrentPosition(showPosition, showError);

            } else {

                x.innerHTML = '当前浏览器不支持地理定位';

            }

        }

        // 获取定位成功，显示位置信息

        function showPosition(position) {

            x.innerHTML =

                'Latitude(纬度): ' + position.coords.latitude + // 纬度

                '<br>Longitude(经度): ' + position.coords.longitude; // 经度

        }

        // 获取定位失败，显示错误信息

        function showError(error) {

            switch (error.code) {

                case error.PERMISSION_DENIED:

                    x.innerHTML = '用户拒绝地理定位请求';

                    break;

            }

        }

    </script>

</body>

</html>

为了查看获取定位后的效果，我们可以手动设置一个虚拟的位置，单击开发者工具右上角的“︙”按钮，选择“More tools”-“Sensors”(传感器)，然后在Geolocation对应的下拉菜单中选择“Shanghai”

调用百度全景地图

百度地图开放平台 | 百度地图API SDK | 地图开发 (https://lbsyun.baidu.com/)

<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

	<style type="text/css">

	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

	</style>

	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

	<title>地图展示</title>

</head>

<body>

	<div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

	// 百度地图API功能

	var map = new BMap.Map("allmap");    // 创建Map实例

	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别

	//添加地图类型控件

	map.addControl(new BMap.MapTypeControl({

		mapTypes:[

            BMAP_NORMAL_MAP,

            BMAP_HYBRID_MAP

        ]}));

	map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的

	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

</script>

自己去申请密钥，并替换在上述代码中

制作地图名片

百度地图名片 (http://api.map.baidu.com/mapCard/)

【前端】【H5 API】地理定位（获取经纬度）的更多相关文章

  1. [置顶] xamarin android使用gps定位获取经纬度

    看了文章你会得出以下几个结论 1.android定位主要有四种方式GPS,Network(wifi定位.基站定位),AGPS定位 2.绝大部分android国产手机使用network进行定位是没有作用 ...

  2. HTML5 Geolocation API地理定位整理（二）

    Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...

  3. HTML5 Geolocation API地理定位整理（一）

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

  4. 百度地图API地点搜索-获取经纬度

    分享一下地图上的地点搜索和鼠标点击获取地点经纬度,这些都是地图比较基本和实用的代码,其中还包括了根据用户IP进行地图的显示.改变地图上的鼠标样式.启用滚轮缩放等,算是半入门吧,其他的一些可以自己参考百 ...

  5. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

  6. 手机端网页使用html5地理定位获取位置失败的解决办法

    网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...

  7. 百度地图API根据地名获取经纬度

    运用了Geocoding API,它包括地址解析和逆地址解析功能. 地址解析是指,由详细到街道的结构化地址得到百度经纬度信息,且支持名胜古迹.标志性建筑名称直接解析返回百度经纬度.例如:“北京市海淀区 ...

  8. 百度地图api根据定位获取附近商家（只获取屏幕内）

    根据中心点坐标计算出屏幕2个点(一个最低经纬度,一个最高经纬度),判断这两个点中间的所有坐标的商家..考虑屏幕分辨率之类 移动地图中心点变动,如何异步刷新,判断商家是否已经存在..等... 百度地图a ...

  9. 百度地图api根据地址获取经纬度

    package com.haiyisoft.cAssistant;import java.io.BufferedReader;import java.io.IOException; import ja ...

  10. H5地理定位获取用户当前位置、城市

    第一步:需要在百度地图开发者平台创建一个应用:http://lbsyun.baidu.com/apiconsole/key/create 配置信息 申请配置成功以后返回一个AK 第二步:引入百度地图的 ...

随机推荐

  1. Win10 LTSC 从 2019(1809) 升级到 2021(21H2) 后找回丢失的 WSL

    Win 10 LTST 2019 升级 2021 很简单,直接挂载 ISO 镜像以后,运行 setup.exe,剩下的就是耐心等待了. 升级完成后,用户信息和安装的软件基本上都在,VM15 启动的时候 ...

  2. Android Qcom USB Driver学习(十二)

    keypad 在suspend的过程中导致Android无法进入suspend的问题,导致整体功耗过高,其实是主机都没有进入睡眠,通过以下打log的方式最终定位到问题,pmic vbus输出的时候会有 ...

  3. ADO.NET组成

    SqlConnection(数据库连接器) SqlCommand(数据库命名对象) SqlCommandBuilder(生存SQL命令) SqlDataReader(数据读取器) SqlDataAda ...

  4. 用自定义功能区完成Excel两种颜色的交错填充

    今天需要用Excel中的填充颜色完成两种颜色的交错填充 在excel中,选择一个颜色填充后,再切换到另一个颜色,再点击填充.操作起来会显得比较笨重 于是萌生了一个想法,是否可以通过Excel的自定义功 ...

  5. WinSCP 脚本实现将 jar 包一键上传 Ubuntu 并 docker 部署

    准备 首先,在 Ubuntu 写一个.sh 脚本用于自动更新 jar 包的 docker 容器和镜像,然后在 Windows 写一个.bat 脚本用于上传 jar 包并运行.sh 脚本. deploy ...

  6. 这些HTTP协议状态码你知道吗？

    使用ASP.NET/PHP/JSP 或者javascript都会用到http的不同状态,一些常见的状态码为: 200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务不可用 1x ...

  7. 高效求解 n 个点之间的最大曼哈顿距离

    平面上有 n 个点,如何求出任意两点的曼哈顿距离的最大值? 曼哈顿距离的公式为: \[d((x_1, y_1), (x_2, y_2)) = |x_1 - x_2| + |y_1 - y_2| \] ...

  8. python项目实战——一元线性回归预测模型

    文章目录 1.一元线性回归简介 2.环境准备 3.数据准备 4.可视化数据 5.构建线性回归模型 在数据科学领域,预测分析是一项核心技能.一元线性回归作为预测分析的基石,能够帮助我们理解一个自变量如何 ...

  9. 洛谷 P1540 [NOIP2010 提高组] 机器翻译

    题目概括 给定 N 个整数,和一个容量为 M 的"字典",从头到尾依次翻译,每次翻译先看自家字典,没有的话再看别人的字典并存到自家字典,如果自家字典满了,当前单词的翻译会代替最早进 ...

  10. Nuxt.js 应用中的 imports：sources 事件钩子详解

    title: Nuxt.js 应用中的 imports:sources 事件钩子详解 date: 2024/10/27 updated: 2024/10/27 author: cmdragon exc ...