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. linux 内核中READ_ONCE宏定义

    在Linux内核编程中,READ_ONCE 宏用于确保从内存中读取一个变量的值时,编译器不会对这个读取操作进行优化,从而保证了读取操作的原子性.这个宏通常在需要防止编译器优化.多线程或中断上下文中使用 ...

  2. linux内核 快速分片,技术|Linux slabtop命令——显示内核片缓存信息

    Linux内核需要为临时对象如任务或者设备结构和节点分配内存,缓存分配器管理着这些类型对象的缓存.现代Linux内核部署了该缓存分配器以持有缓存,称之为片.不同类型的片缓存由片分配器维护.本文集中讨论 ...

  3. OOOPS：零样本实现360度开放全景分割，已开源 | ECCV'24

    全景图像捕捉360°的视场(FoV),包含了对场景理解至关重要的全向空间信息.然而,获取足够的训练用密集标注全景图不仅成本高昂,而且在封闭词汇设置下训练模型时也受到应用限制.为了解决这个问题,论文定义 ...

  4. 解决 WebSocketClient.js?5586:16 WebSocket connection to 'ws://192.168.13.25:8080/ws' failed:

    控制台报错: vue.config.js Vue的配置文件 const { defineConfig } = require('@vue/cli-service') module.exports = ...

  5. 6.19 成都站云原生 Meetup，KubeSphere 和 APISIX 等你来！

    以容器技术和容器编排为基础的云原生应用,被越来越多的企业用户接受和使用,并且在生产环境中使用容器技术的比例逐年增加.KubeSphere 作为一款面向应用的开源容器混合云,经过 3 年的发展和 10 ...

  6. 在 Debian 12 上安装 KubeSphere 实战入门

    老 Z,运维架构师,云原生爱好者,目前专注于云原生运维,云原生领域技术栈涉及 Kubernetes.KubeSphere.DevOps.OpenStack.Ansible 等. 前言 知识点 定级:入 ...

  7. jmeter测试rpc接口-使用dubbo框架调用

    1.下载用于测试dubbo的spring boot项目 参考文章: http://t.zoukankan.com/111testing-p-11297038.html https://zhuanlan ...

  8. Java Z 垃圾收集器如何彻底改变内存管理

    大家好,我是 V 哥,今天的内容来聊一聊 ZGC,Java Z Garbage Collector(ZGC)是一个低延迟垃圾收集器,旨在优化内存管理,主要用于大内存应用场景.它通过以下几个关键创新,彻 ...

  9. 题解：CF718A Efim and Strange Grade

    CF718A Efim and Strange Grade 题解 算法 贪心+模拟 思路分析 显然,要最优每一次进位就只能五入不能四舍.而且当我们五入时,要取位数最高的.比如说 \(1.3535\), ...

  10. OSG开发笔记（三十三）：同时观察物体不同角度的多视图从相机技术

    前言   前面的相机hud可以单独显示图形,继续深入研究相机hud,技术就是子视图了,实现该功能的直接技术是从相机技术.  本篇描述osg从相机技术   Demo         相机视口的关键调用 ...