不需要知道其他腳本和程序是如何完成它們的任務(wù)的, 只需知道它們是做什么的, 如何請求它們做某事,以及如何理解它們的回應(yīng).

• 我們只要知道如何調(diào)用函數(shù), 創(chuàng)建對象, 以及訪問對象的屬性和方法, 就能使用任何 API .

HTML5 JavaScript API

在使用時應(yīng)先檢測瀏覽器是否支持然后再使用

• 用 navigator 來判斷

if (navigator.geolocation) {
  //code
} else {
  //code
}

• 也可使用 Modernizr 腳本來判斷

引用 Modernizr 腳本后, 就會添加一個名為 Modernizr 的對象, 該對象能夠檢測瀏覽器是否支持某些特性, 因為每個特性都是這個對象的一個屬性, 值都是 Boolean 類型,可借此判斷是否支持相應(yīng)的特性.

if (Modernizr.geolocation) {
  //code
} else {
  //code
}

geolocation 位置定位 API

告訴用戶所在的位置
調(diào)用方法: `navigator.geolocation.getCurrentPosition(success, fail)

• getCurrentPosition()方法是一個異步請求, 因此這個方法有兩個參數(shù)

success 是一個函數(shù)名稱, 如果成功返回經(jīng)緯度, 就會調(diào)用這個函數(shù), 并且會自動傳入一個名為 position的對象,該對象保存了用戶地位置

fail 也是一個函數(shù)名稱, 當(dāng)瀏覽器無法獲得位置信息時, 就會調(diào)用這個函數(shù), 并會自動傳入一個名為 positionError 的對象, 這個對象包含了錯誤的詳細(xì)信息

// 示例:
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
}