HTML5之地理位置
来源:互联网 发布:mac 10.12 降级 编辑:程序博客网 时间:2024/05/20 00:49
直接上代码吧:
<html>
<head><script src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div id="loaction">your loaction</div>
<div id="map">map</div>
</body>
<script>
window.onload=getMyLocation;
var map;//全局变量map对象
function getMyLocation(){
if(navigator.geolocation){//如果浏览器支持位置定位的话
navigator.geolocaton.getCurrentPostion(displayLocation);
}else{
alert("no geolocation suppert!")
}
//显示位置
function displayLocation(position){
var latitude=position.coords.latitude;//纬度
var longitude=position.coords.longitude;//经度
var location=document.getElementById("location");
location.innerHTML="your postion is "+"latitude:"+latitude+" longitude:"+longitude;
showMap(position.coords);//调用showMap显示地图
}
}
//显示地图
function showMap(coords){
var googleLatAndLong=new google.maps.LatLng(coords.latitude,coords.longitude);//通过coords的经度和纬度构造出一个google.maps.LatLng对象
var mapOptions={
zoom:10,//地图放大程度
center:googleLatAndLong,//地图在这个位置居中
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var mapDiv=document.getElementById("map");
map=new google.maps.map(mapDiv,mapOptions);//google.maps.map是google API提供的构造函数,其创建返回一个地图对象,地图会在id为map的Div处显示
}
//计算两地之间的距离
function computeDistance(startCoords,destCoords){//给一个起始位置和目标位置
var startLatRads=degreesToRadians(startCoords.latitude);//对起始位置的纬度进行换算
var startLongRads=degreesToRadians(startCoords.longitude);//对起始位置的经度进行换算
var destLatRads=degreesToRadians(destCoords.latitude);//对目标位置的纬度进行换算
var destLongRads=degreesToRadians(destCoords.longitude);//对目标位置的经度进行换算
var Radius=6371;//地球半径
var distance=Math.acos(Math.sin(startLatRads)*Math.sin(destLatRads)+Math.cos(startLatRads)*Math.cos(DestLatRads)*Math.cos(startLongRads-destLongRads))*Radius;
return distance;
}
//计算弧度
function degreeToRadians(degrees){
var radians=(degrees*Math.PI)/180;//弧度
return radians;
}
//熟悉地图的我们都知道,地图上都有一个类似大头针的来标记位置,下面我们来加一个大头针的实现
function addMarker(map,latlong,title,content){参数分别是:map对象,经纬度,标题,信息窗口的内容(点大头针看到的信息)
var markerOption={
position:latlong;//位置信息
map:map;//map对象
title:title;
clickable:true;//设置为true时点击大头针显示信息窗口
};
var marker=new google.maps.Marker(makerOption);
}
//跟踪位置
var watchId=null;
function watchLocation{
watchId=navigator.geloacation.watchPosition(displayLocation,displayError);//参数分别是显示位置,和错误处理的函数
}
//如果要清除跟踪
function clearWatch(){
if(witchId){
navigator.geolocation.clearWatch(watchId);
}
}
//记录我们的移动轨迹?
function scrollMapToPosition(coords){
var latitude = coords.latitude;
var longitude =coords.longitude;
var latlong=new google.maps.latLng(latitude,longitude);
map.panTo(latlong);//地图的panTo方法取得latlong对象并滚动地图,使新位置位于地图中心
addMarker(map,latlong ,title,content);
}
</script></html>
- HTML5之地理位置
- HTML5之地理位置
- HTML5之地理位置
- HTML5之地理位置
- HTML5之地理位置(定位技术)
- Html5 系列之:地理位置Geolocation
- HTML5 地理位置
- HTML5 地理位置
- HTML5 --地理位置
- HTML5 地理位置
- 【js学习笔记-115】----html5之地理位置
- HTML5 之Geolocation API (地理位置应用程序接口)
- html5 学习之路 三 (地理位置+数据存储)
- HTML5开发 地理位置定位
- HTML5 地理位置定位
- HTML5 Geolocation 地理位置 - 6
- html5获取地理位置
- HTML5 Geolocation获取地理位置
- 【3005】拦截导弹问题(noip1999)
- RDD, DataFrame or Dataset
- 以项目管理的理念制作高质量的标书
- 玩转树莓派之五----安装chrome,flash
- 设计模式--单一职责原则,开放封闭原则,依赖倒转原则
- HTML5之地理位置
- MFC学习之菜单栏创建
- NYOJ-盗梦空间
- Paxos算法证明
- Android开发——数据库框架Sugar出现no such table xxxx错误的解决办法
- 关于struts2
- 定时取指定进程内存脚本
- 项目中遇到的问题,解决的方法
- git ignore 添加后不生效 解决办法