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()”>

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

相关文章
|
5月前
|
移动开发 搜索推荐 定位技术
HTML地理定位
HTML地理定位
45 0
|
5月前
|
搜索推荐 定位技术 UED
HTML定位技术:种类、特点与应用
HTML定位技术:种类、特点与应用
|
11天前
|
存储 移动开发 定位技术
HTML5 Geolocation(地理定位)优化到最高精度
HTML5 Geolocation API 可让网页访问用户的地理位置信息。为优化地理定位精度,需考虑设备、浏览器设置、网络状况及编码实现。使用 `enableHighAccuracy` 选项请求高精度,并确保设备开启 GPS,网络良好。结合多种数据源(如 GPS、Wi-Fi)可提高准确性。利用 `watchPosition` 定期更新位置,并妥善处理定位错误。务必遵循用户隐私原则,获取同意并遵守相关法规。这样可有效提升地理定位的精度与用户体验。
|
15天前
|
移动开发 JavaScript 前端开发
Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)
本文介绍了在Twaver HTML5中如何设置告警元素(Alarm)的位置,包括Node和Link网元的告警位置偏移量以及定位理解。通过示例代码展示了如何在不同类型网元上设置告警位置,并解释了如何通过百分比来确定告警在Link网元上的位置。
28 0
Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)
|
1月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
2月前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
2月前
|
Web App开发 移动开发 安全
html5地理定位的一些问题
html5地理定位的一些问题
|
3月前
|
XML 数据采集 机器学习/深度学习
使用 XPath 定位 HTML 中的 img 标签
使用 XPath 定位 HTML 中的 img 标签
|
5月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
53 0
webgl学习笔记3_javascript的HTML DOM
|
12月前
|
移动开发 JavaScript 前端开发
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
237 0