不需要知道其他脚本和程序是如何完成它们的任务的, 只需知道它们是做什么的, 如何请求它们做某事,以及如何理解它们的回应.
- 我们只要知道如何调用函数, 创建对象, 以及访问对象的属性和方法, 就能使用任何 API .
HTML5 JavaScript API
在使用时应先检测浏览器是否支持然后再使用
- 用 navigator 来判断
if (navigator.geolocation) {
//code
} else {
//code
}
- 也可使用 Modernizr 脚本来判断
引用 Modernizr 脚本后, 就会添加一个名为 Modernizr 的对象, 该对象能够检测浏览器是否支持某些特性, 因为每个特性都是这个对象的一个属性, 值都是 Boolean 类型,可借此判断是否支持相应的特性.
if (Modernizr.geolocation) {
//code
} else {
//code
}
geolocation 位置定位 API
告诉用户所在的位置
调用方法: `navigator.geolocation.getCurrentPosition(success, fail)
-
getCurrentPosition()方法是一个异步请求, 因此这个方法有两个参数
success 是一个函数名称, 如果成功返回经纬度, 就会调用这个函数, 并且会自动传入一个名为
position的对象,该对象保存了用户地位置fail 也是一个函数名称, 当浏览器无法获得位置信息时, 就会调用这个函数, 并会自动传入一个名为 positionError 的对象, 这个对象包含了错误的详细信息
// 示例:
var elMap = document.getElementById('loc'); // HTML element
var msg = 'Sorry, we were unable to get your location.'; // No location msg
if (Modernizr.geolocation) { // Is geo supported
navigator.geolocation.getCurrentPosition(success, fail); // Ask for location
elMap.textContent = 'Checking location...'; // Say checking...
} else { // Not supported
elMap.textContent = msg; // Add manual entry
}
function success(position) { // Got location
msg = '<h3>Longitude:<br>'; // Create message
msg += position.coords.longitude + '</h3>'; // Add longitude
msg += '<h3>Latitude:<br>'; // Create message
msg += position.coords.latitude + '</h3>'; // Add latitude
elMap.innerHTML = msg; // Show location
}
function fail(msg) { // Not got location
elMap.textContent = msg; // Show error message
console.log(msg.code); // Log the error
}
