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

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

相关文章
|
9月前
|
前端开发 开发者
HTML+CSS+JS 学习笔记(二)———CSS
HTML+CSS+JS 学习笔记(二)———CSS
143 0
|
1月前
|
移动开发 定位技术 API
编程笔记 html5&css&js 035 HTML 地理定位
编程笔记 html5&css&js 035 HTML 地理定位
|
2月前
|
Web App开发
某教程学习笔记(一):04、HTML基础
某教程学习笔记(一):04、HTML基础
14 0
|
8月前
|
前端开发 UED 容器
|
8月前
|
前端开发
[HTML]HTML学习笔记(四)
[HTML]HTML学习笔记(四)
|
8月前
|
移动开发 前端开发 JavaScript
|
7月前
|
前端开发 JavaScript 算法
网络结构与HTML学习笔记
网络结构与HTML学习笔记
149 0
网络结构与HTML学习笔记
|
7月前
HTML学习笔记(二)
HTML学习笔记(二)
27 0
|
7月前
HTML学习笔记(一)
HTML学习笔记
29 0