HTML5之地理位置

最新推荐文章于 2022-02-03 21:28:29 发布

北半球先生

最新推荐文章于 2022-02-03 21:28:29 发布

阅读量277

点赞数

分类专栏： Html5

本文链接：https://blog.csdn.net/sinat_22808389/article/details/51879627

版权

Html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

直接上代码吧：

<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.οnlοad=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对象
v ar 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);

}

//跟踪位置