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

html5--位置感知(基于js的地理定位geolocation API)结合Google Maps

2016-04-09 22:07 627 查看

1.检测浏览器是否支持地理位置API

//检测浏览器是否支持地理位置API(navigator.geolocation)
if (navigator.geolocation) {
}else{
alert("Your browser does not support Geolocation!");
}


2.地理位置API支持的方法getCurrentPosition

getCurrentPosition(successHandler,errorHandler,options)

参数：

1.successHandler是函数，成功确定位置则调用这个函数

2.errorHandler是函数，若不能成功确定位置则调用此函数,可选

3.options参数允许定制地理定位方法，可选

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successHandler,errorHandler,options)
}else{
alert("Your browser does not support Geolocation!");
}
//地理位置API传入成功处理程序的对象POSITION
function successHandler(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}
//地理位置API会向它传入一个错误
function errorHandler(error){
switch(error.code) {
case error.TIMEOUT:
showError("A timeout occured! Please try again!");
break;
case error.POSITION_UNAVAILABLE:
showError('We can\'t detect your location. Sorry!');
break;
case error.PERMISSION_DENIED:
showError('Please allow geolocation access for this to work.');
break;
case error.UNKNOWN_ERROR:
showError('An unknown error occured!');
break;
}
}
//timeout在这个时间内没找到位置，就会调用错误处理程序
var options = {
enableHighAccuracy:false,
timeout:Infinity,
maximumAge:0
};


3.地理位置API支持的方法watchPosition和clearWatch

watchPosition和getCurrentPosition很相似，但是watchPosition是一直在检测位置，等位置变化时，则会调用函数报告新位置，调用clearWatch时清除检测。

<!doctype html>
<html>
<head>
.....
</head>
<body>
<form>
<input type="button" id="watch" value="Watch me">
<input type="button" id="clearWatch" value="Clear watch ">
</form>
</body>
</html>


function getLocation(){
if(nagivator.geolocation) {
var watchButton = document.getElementById("watch");
watchButton.onclick = watchLocation;
var clearWatchButton = document.getElementById("clearWatch");
clearWatchButton.onclick = clearWatch;
} else{
alert("no geolocation support");
}
}
//watchid设置成全局变量
var watchId = null;
function watchLocation(){
watchId = navigator.geolocation.watchPosition(successHandler,errorHandler);
}
function clearWatch(){
if(watchid) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
}
}


4.结合Google Maps可视化表示

地理位置API只可以跟踪位置，但是不可以可视化显示。

结合Google Maps进行可视化表示。

js得到Google Maps的所用功能

<script
//sensor=false表示不需要自己的位置，sensor=true表示使用自己的位置
src=https://maps.google.com/maps/api/js?sensor=true>
</script>


if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successHandler)
}else{
alert("Your browser does not support Geolocation!");
}
//地理位置API传入成功处理程序的对象POSITION
function successHandler(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
showMap(position.coords);
}

function showMap(coords){
//Google API希望经纬度包装在单独的对象中,如下是取得经纬度的构造函数
var googlemap = new google.maps.LatLng(coords.latitude,coords.longitude);
//根据地图选项创建对象
var mapptions = {
zoom:10,
center:googlemap,
mapTypeId:google.maps.MapTypeId.RPADMAP
};
var mapDiv = document.getElementById("map");
//利用Google API创建一个地图对象（取元素和我们的选项）
map = new google.maps.Map(mapDiv,mapOptions);
}


在可视化地图上添加一个大头钉

var title = "Your location";
var content = "you are here:" + coords.latitude +","+cpprds.longitude;
addMarker(map,googlemap,title,content);

function addMarker(map,latlong,title,content){
var markerOptions = {
position:latlong,
map:map,
title:title,
//true是在点击大头钉的时候能显示一个信息窗口
clickable:true
};
var marker = new google.maps.Marker(markerOptions);
var infoWindowOptions = {
content:content,
position:latlong
};
//创建信息窗口
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(marker,"click",function(){
infoWindow.open(map);
})
};


5.给一个完整的程序

var options = {
enableHighAccuracy:true,
timeout:100,
maximumAge:0
};
window.onload = getLocation;

function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successHandler,errorHandler,options)
}else{
alert("Your browser does not support Geolocation!");
}
}

function successHandler(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

var div = document.getElementById("location");
//输出经纬度和获取位置花费的事件
div.innerHTML = latitude + longitude;
div.innerHTML+="(found in" + options.timeout +"ms)";

showMap(position.coords);
}

function errorHandler(error){
switch(error.code) {
case error.TIMEOUT:
showError("A timeout occured! Please try again!");
break;
case error.POSITION_UNAVAILABLE:
showError('We can\'t detect your location. Sorry!');
break;
case error.PERMISSION_DENIED:
showError('Please allow geolocation access for this to work.');
break;
case error.UNKNOWN_ERROR:
showError('An unknown error occured!');
break;
}
//出现失败后，重新尝试，则把timeout选项增加100ms
options.timeout+=100;
navigator.geolocation.getCurrentPosition(successHandler,errorHandler,options);
div.innerHTML+="checking again with timeout="+options.timeout;
}
function showMap(coords){
//Google API希望经纬度包装在单独的对象中,如下是取得经纬度的构造函数
var googlemap = new google.maps.LatLng(coords.latitude,coords.longitude);
//根据地图选项创建对象
var mapptions = {
zoom:10,
center:googlemap,
mapTypeId:google.maps.MapTypeId.RPADMAP
};
var mapDiv = document.getElementById("map");
//利用Google API创建一个地图对象（取元素和我们的选项）
map = new google.maps.Map(mapDiv,mapOptions);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航