不需要知道其他脚本和程序是如何完成它们的任务的, 只需知道它们是做什么的, 如何请求它们做某事,以及如何理解它们的回应.

• 我们只要知道如何调用函数, 创建对象, 以及访问对象的属性和方法, 就能使用任何 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
}