您的位置：首页 > Web前端 > HTML5

HTML5之地理位置

2016-07-11 11:41 211 查看

直接上代码吧：

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航