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. kmemleak 和kasan 的区别

    kmemleak 和kasan 都是 Linux 内核中的一些工具和特性,用于帮助进行内存错误检测和修复.然而,它们之间有一些区别: 功能:kmemleak 用于检测内核中未释放的内存泄漏,它可以跟踪 ...

  2. Java日期时间API系列14-----Jdk8中java.time包中的新的日期时间API类，java日期计算1，获取年月日时分秒等

    通过Java日期时间API系列8-----Jdk8中java.time包中的新的日期时间API类的LocalDate源码分析 ,可以看出java8设计非常好,实现接口Temporal, Tempora ...

  3. 数据库故障处理优质文章汇总（含Oracle、MySQL、MogDB等）

    数据库告警.紧急问题处理这些项目对于大多数朋友来讲应该不陌生了.从墨天轮社区整理的"最受DBA欢迎的技术文档合辑"系列中可以发现,大家对"故障诊断专题"的热情居 ...

  4. 封装一个Promise.all 的函数

    // 1. 准备三个异步函数 const promise1 = Promise.resolve('prom11ise1'); const promise2 = new Promise(function ...

  5. 一文彻底搞透Redis的数据类型及具体的应用场景

    Redis 提供了丰富的数据类型,每种数据类型都有其独特的存储结构和操作方法,可以满足不同的业务场景需求.下面详细介绍 Redis 支持的主要数据类型及其底层实现,并结合具体的应用场景说明其使用. 1 ...

  6. CSS动画（动态导航栏）

    1.项目简介 一个具有创意的导航菜单不仅能为你的大作业增色,还能展示你的技术实力.本文将分享一系列常用于期末大作业的CSS动画导航效果,这些效果不仅外观酷炫,而且易于实现.我们提供了一键复制的代码,让 ...

  7. 实时数仓及olap可视化构建(基于mysql，将maxwell改成seatunnel可以快速达成异构数据源实时同步)

    1. OLAP可视化实现(需要提前整合版本) Linux121 Linux122 Linux123 jupyter spark python3+SuperSet3.0 hive ClinckHouse ...

  8. 基于Java+SpringBoot+Mysql实现的快递柜寄取快递系统功能实现三

    一.前言介绍: 1.1 项目摘要 随着电子商务的迅猛发展和城市化进程的加快,快递业务量呈现出爆炸式增长的趋势.传统的快递寄取方式,如人工配送和定点领取,已经无法满足现代社会的快速.便捷需求.这些问题不 ...

  9. 基于 Github 平台的 .NET 开源项目模板 - ISSUE 相关

    上一篇已经介绍了工程和脚本.下面我们将以具体的功能作为着手点, 展开对 project.yml 工程配置文件的讲解. 赘述 project.yml 使用周期 文件来源: 运行跟目录下的 scanner ...

  10. OpenGL编程指南（原书第9版）

    这本书是<OpenGL编程指南(原书第9版)>,也称为<OpenGL Programming Guide: The Official Guide to Learning OpenGL ...