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. iOS生成ipa包的时候总是弹窗提示macOS想要使用系统钥匙串

    最近新换了一台苹果电脑,性能不错,不过证书和描述文件需要重新配置,遇到了一系列奇怪的问题.在这里整理记录下来,希望能给其他人提供一些帮助.iOS生成ipa包的时候总是弹窗提示[macOS想要使用系统钥 ...

  2. 怎么根据token的有⽆去控制路由的跳转？进度条跳转 - 白名单是否有token - 单独封装文件permission .js

    vue这边的路由⾃带了路由前置守卫,我们可以在前置守卫⾥拿到token数据,然后根据需求做分⽀判 断,要是token存在就使⽤next⽅法正常放⾏跳转,否则可以强制跳回到登录,让⽤户去获取token ...

  3. 014 Python 的数据类型（数字、字符串、列表、字典）

    #!/usr/bin/env python # -*- coding:utf-8 -*- # Datatime:2022/7/24 20:31 # Filename:014 Python 的数据类型( ...

  4. 008 Python、Anaconda、pip、Pycharm、Jupyter 的下载

    下述所有软件的具体做法:https://www.cnblogs.com/nickchen121/p/10718112.html python 下载 搜一下 python:https://www.pyt ...

  5. kotlin类与对象——>嵌套类与内部类、枚举类

    1.嵌套类,类可以嵌套在其他类中: class Outer { private val bar: Int = 1 class Nested { fun foo() = 2 } } val demo = ...

  6. .NET 内存管理两种有效的资源释放方式

    前言 嗨,大家好!今天我们要聊一聊 .NET 中的内存管理.你知道吗?虽然 .NET 有一个很好的垃圾回收系统来自动清理不再使用的对象,但在某些情况下,我们还需要自己动手来释放一些特殊的资源,比如打开 ...

  7. mysql基础-事务

    本篇章为初步了解mysql数据事务控制问题,事务作为MySQL的基础篇章是至关重要的一部分内容! 事务 1.事务简介 事务是一组操作的集合,它是一个不可分割的工作单位,事务会把所有的操作作为一个整体一 ...

  8. 《这是全网最硬核redis总结，谁赞成，谁反对？》六万字大合集

    <这是全网最硬核redis总结,谁赞成,谁反对?>六万字大合集 我啥都不想说了,本文章来自 "本来可以靠脸吃饭的,非得靠技术的一位小姐姐" 名字叫:"兔兔Ra ...

  9. HEU KMS：一款超稳的MS Windows激活工具

    HEU KMS ACTIVATOR是一款功能齐全的免费Windows和Office系列激活工具. 打开程序,一步到位.直接点击开始就可以准备激活,Windows11/10乃至更早的版本都可以通用,顺带 ...

  10. 160. 相交链表 Golang实现

    题目描述: 给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点.如果两个链表不存在相交节点,返回 null . 注意这里的相交节点表示的是值和物理位置都相同的 ...