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. GPT分区和MRB分区

    GPT分区和MBR分区都是硬盘分区的方式,但它们有不同的实现方法和优缺点. MBR(Master Boot Record)分区是传统的分区方式,它将硬盘分为四个主分区或者三个主分区和一个扩展分区.在每 ...

  2. Centos7下非lvm的分区扩容

    Centos7下非lvm的分区扩容(重要) 前言:一般在生产环境中,如果需要使用一个分区保存大量的文件,建议的做法是在虚拟化环境中增加一块单独的硬盘,挂载一个单独的分区,比如 /data 上图我们可以 ...

  3. 云原生周刊：Kubernetes v1.30 发布 ｜ 2024.4.22

    开源项目推荐 pv-migrate pv-migrate 是一个 CLI 工具/kubectl 插件,可轻松将一个 Kubernetes 的内容迁移 PersistentVolumeClaim 到另一 ...

  4. RHEL 环境下 Subversion 服务器部署与配置

    RHEL 环境下 Subversion 服务器部署与配置 1. 更新系统 首先确保系统软件包是最新的: sudo yum update -y 2. 安装Apache和Subversion 2.1 安装 ...

  5. Redis的发布订阅Pub/Sub

    发布订阅 Redis 发布订阅(publish/subscribe)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图展示了频道 ...

  6. html中div加滚动条

    div 加滚动条的两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;"></div ...

  7. 矩阵怪 - 2024全新矩阵产品，一键分发抖音，快手，视频号，B站，小红书！

    本方案面向谁,解决了什么问题 本方案主要面向C端客户,特别是那些在各大短视频平台(如小红书.抖音.视频号.快手.B站等)上进行内容创作和分发的个人用户.自由职业者.小型团队或企业.这些用户通常面临着在 ...

  8. quartz集群增强版🎉

    quartz集群增强版 转载请著名出处https://www.cnblogs.com/funnyzpc/p/18534034 这是除了mee_admin之外,投入时间精力最多的一次开源了,quartz ...

  9. 3-5&&6 C++数组遍历

    遍历二维数组的三种方式 #include<iostream> #include<string> #include<vector> using namespace s ...

  10. Cargo deny安装指路

    本博客所有文章除特别声明外,均采用CC BY-NC-SA 4.0许可协议.转载请注明来自 唯你 简介 cargo deny 是一个 Rust 工具,用于检查项目依赖项的许可证.安全性和其他合规性问题. ...