HTML5地理定位|学习笔记

简介: 快速学习HTML5地理定位

发者学堂课程【HTML5 新特性学习HTML5地理定位】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/396/detail/5051


HTML5地理定位


内容介绍:

一、地理定位

二、示例


一、地理定位

地理定位:

HTML5  Geolocation API 用于获得用户的地理位置

浏览器支持:

lnternet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位

注释:对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确


二、示例:

创建一个 index 的 html,输入

<div id = “map” style = “width : 1000px;height : 2000px”>

</div>

再来添加 <script> 标签

<script type = “text/javascript” src =“http://maps.google.com/maps/api/

js?sensor=false” ></script>

<script>

  //获取当前地理位置

function init () {

navigator.geolocation.getCurrentPosition(function(position){

var coords = position.coords;

   //设定地图参数,将用户当前地理的经纬度设为地图中心点

  var latlng = new

google.maps.LatLng(coords.latitude,

coords.longitude);

   var myOptions = {

   zoom:14,

center:latlng,

   mapTypeId:google.maps.MapTypeId.ROADMAP

};

//创建地图并 “map”div中显示

var map1;

map1 = new google.maps.Map(document.getElementById

(“map”),myOptions);

//地图上创建标记

var marker = new google.maps.Marker({

position:latlng,

map:map1

});

//设定标准窗口,并指定该窗口的注释文字

var infowindow = new google.maps.InfoWindow({

   content: “当前位置”

});

infowindow.open(map1,marker);

})

}

</script>

<body> 标签中修改为 <body onload = “init()”>

进行测试,右上方有个定位,点击后如下

相关文章
|
7月前
|
移动开发 搜索推荐 定位技术
HTML地理定位
HTML地理定位
64 0
|
13天前
|
移动开发 HTML5
HTML5 3D地球仪可按经纬坐标定位特效
这是一个基于HTML5的3D地球仪动画,地球仪不仅可以自动自西向东旋转,而且还可以旋转到指定经纬度坐标。另外,还有一个控制面板,可以控制地球是否自转、光晕是否显示,以及地理缩放。你也可以通过拖拽鼠标来改变地球仪的视角,可以将它移至南北极的视角,也可以移至赤道的视角,非常方便。需要的朋友可下载试试!
27 2
|
26天前
|
移动开发 监控 定位技术
HTML5 Geolocation(地理定位)6
`getCurrentPosition()` 方法用于获取设备当前地理位置,成功时返回包含多个属性的对象,如纬度、经度、精度等。`watchPosition()` 持续监控位置变化,适合移动应用;`clearWatch()` 则停止位置监控。示例代码展示了如何使用 `watchPosition()` 获取并显示当前位置信息。
|
27天前
|
传感器 移动开发 定位技术
HTML5 Geolocation(地理定位)2
`getCurrentPosition()`方法的第二个参数用于处理获取用户位置时可能出现的错误。示例中的`showError`函数通过`error.code`区分不同类型的错误,并显示相应的提示信息。错误类型包括:用户拒绝、位置不可用、请求超时和未知错误。此外,还展示了如何使用返回的经纬度在谷歌地图中显示位置的示例。
|
27天前
|
移动开发 定位技术 iOS开发
HTML5 Geolocation(地理定位)3
本页介绍如何在地图上显示用户位置,并利用地理定位提供给定位置的相关信息,如更新本地信息、显示周边兴趣点等。通过 `getCurrentPosition()` 方法可获取用户当前位置的详细数据,包括经纬度、精度等。此外,`watchPosition()` 和 `clearWatch()` 方法分别用于持续跟踪用户位置变化和停止位置跟踪。示例代码展示了如何使用这些方法实现位置跟踪功能。
HTML 统一资源定位器(Uniform Resource Locators)3
URL字符编码是指将URL中非ASCII字符转换为有效的ASCII格式的过程。URL只能使用ASCII字符集,因此需要对超出该集合的字符进行编码。URL编码使用“%”加上两位十六进制数来表示非ASCII字符,空格通常被编码为“+”。例如,€编码为%80,£编码为%A3。更多信息可参见URL编码参考手册。
|
1月前
|
安全 数据安全/隐私保护
HTML 统一资源定位器(Uniform Resource Locators)2
常见的URL Scheme包括:http(超文本传输协议,用于普通网页,不加密)、https(安全超文本传输协议,用于安全网页,加密信息交换)、ftp(文件传输协议,用于文件的上传和下载)、file(用于访问本地计算机上的文件)。
HTML 统一资源定位器(Uniform Resource Locators)1
统一资源定位器(URL)是用于标识互联网上资源位置的标准格式。URL通常由方案、主机、域名、端口、路径和文件名组成,如 `http://www.runoob.com/html/html-tutorial.html`。大多数用户通过域名访问网站,因为域名比IP地址更容易记忆。URL在Web浏览器中用于请求页面,通过 `&lt;a&gt;` 标签实现链接跳转。
|
26天前
|
移动开发 定位技术 HTML5
HTML5 Geolocation(地理定位)5
本示例展示了如何利用获取的经纬度数据,在谷歌地图中以静态图片形式显示用户位置。此方法可扩展用于更新本地信息、展示周边兴趣点及实现车载导航系统等应用。
|
26天前
|
移动开发 定位技术 HTML5
HTML5 Geolocation(地理定位)4
`getCurrentPosition()` 方法的第二个参数用于处理获取用户位置时可能出现的错误。通过定义 `showError` 函数,可以根据不同的错误代码(如权限被拒、位置不可用、超时等)显示相应的错误信息。
下一篇
DataWorks