我试图通过
HTML5 geolcation api获取用户的地理位置,我使用以下代码段：
if (navigator.geolocation) {
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.getCurrentPosition(
displayPosition,displayError,{ enableHighAccuracy: true,timeout: timeoutVal,maximumAge: 0 }
);
}
else {
// DO SOME STUFF HERE
}
function displayPosition(position) {
// configuration
var myZoom = 12;
var myMarkerIsDraggable = true;
var myCoordsLenght = 6;
var defaultLat = position.coords.latitude;
var defaultLng = position.coords.longitude;
document.getElementById('latitude').value = defaultLat;
document.getElementById('longitude').value = defaultLng;
/*
1. creates the map
2. zooms
3. centers the map
4. sets the map’s type
*/
var map = new google.maps.Map(document.getElementById('canvas'),{
zoom: myZoom,center: new google.maps.LatLng(defaultLat,defaultLng),mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
// centers the map on markers coords
map.setCenter(myMarker.position);
// adds the marker on the map
myMarker.setMap(map);
}
function displayError(error) {
var errors = {
1: 'Permission denied',2: 'Position unavailable',3: 'Request timeout'
};
alert("Error: " + errors[error.code]);
}
});
上述方法的麻烦在于,很少有用户发现使用起来很困难.几次,他们点击了拒绝,而不是允许,并保持盯着屏幕.所以从可用性的角度来看,我认为一个好办法是：
>请他们许可.
>等待3秒钟,如果他们点击拒绝或不响应,则使用IP在地图上显示地理.
我如何在上面的代码片段中完成第二步.
请让我知道,谢谢！
但是,什么是更好的处理方式
解决方法
这是一个我之前写过的一个脚本(
geolocator.js),最近更新了.
更新：Geolocator v2发布.
特征：
> HTML5地理位置(按用户权限)
> IP位置
>地理编码(地址坐标)
>反向地理编码(坐标地址查找)
>完整的地址信息(街道,城镇,邻里,地区,
国家,国家代码,邮政编码等)
回退机制(从HTML5地理位置到IP地理查找)
>观看地理位置
>获取距离矩阵和持续时间
>计算两个地理点之间的距离
>获取时区信息
>获取客户端IP
>支持Google Loader(动态加载Google地图)
>动态创建Google地图(带标记,信息窗口,自动调整缩放)
>非阻塞脚本加载(外部源在运行时加载而不中断页面加载)
见live demo.
见API documentation.
用法：
var options = {
enableHighAccuracy: true,timeout: 6000,maximumAge: 0,desiredAccuracy: 30,// meters
fallbackToIP: true,// get location by IP if geolocation fails or rejected
addressLookup: true,// requires Google API key
timezone: true,// requires Google API key
map: "my-map" // creates a Google map. requires Google API key
};
geolocator.locate(options,function (err,location) {
console.log(err || location);
});
示例输出：
{
coords: {
latitude: 37.4224764,longitude: -122.0842499,accuracy: 30,altitude: null,altitudeAccuracy: null,heading: null,speed: null
},address: {
commonName: "",street: "Amphitheatre Pkwy",route: "Amphitheatre Pkwy",streetNumber: "1600",neighborhood: "",town: "",city: "Mountain View",region: "Santa Clara County",state: "California",stateCode: "CA",postalCode: "94043",country: "United States",countryCode: "US"
},formattedAddress: "1600 Amphitheatre Parkway,Mountain View,CA 94043,USA",type: "ROOFTOP",placeId: "ChIJ2eUgeAK6j4ARbn5u_wAGqWA",timezone: {
id: "America/Los_Angeles",name: "Pacific Standard Time",abbr: "PST",dstOffset: 0,rawOffset: -28800
},flag: "//cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/flags/4x3/us.svg",map: {
element: HTMLElement,instance: Object,// google.maps.Map
marker: Object,// google.maps.Marker
infoWindow: Object,// google.maps.InfoWindow
options: Object // map options
},timestamp: 1456795956380
}
