开发者学堂课程【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()”>
进行测试,右上方有个定位,点击后如下