前端培訓-中級階段（18）- 地理定位(Geolocation)API（2019-09-26期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。

這節課其實很簡單，一句話，國內用不了地理定位API。好了，開始我們今天的課程。測試地址

原生API

地理位置API 通過 navigator.geolocation 來獲取。必須支持 https。必須授權。必須可以訪問google（因爲使用的人家的服務）所以科學上網。

  if ("geolocation" in navigator) {
    /* 地理位置服務可用 */ 
  } else {
    /* 地理位置服務不可用 */
  }

  // 獲取一次
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log('getCurrentPosition:success', position, position.coords.latitude, position.coords.longitude);
  }, function(a,b,c,d,e){
    console.log('getCurrentPosition:success', a,b,c,d,e);
  });

  // 如果有改變會實時通知
  navigator.geolocation.watchPosition(function(position) {
    console.log('watchPosition:success', position, position.coords.latitude, position.coords.longitude);
  }, function(a,b,c,d,e){
    console.log('watchPosition:success', a,b,c,d,e);
  });

百度地圖

Web API

文檔地址
接口https://api.map.baidu.com/location/ip

JavaScript API

文檔地址

1. 瀏覽器定位 優先調用瀏覽器H5定位接口，如果失敗會調用IP定位
2. IP定位 根據用戶IP 返回城市級別的定位結果
3. 定位SDK輔助定位 當您的APP中有內置的Web頁面，同時在Web頁面需要提供您的當前位置信息時，可調用集成在App中的百度地圖定位SDK來獲取更精準的位置信息

高德地圖

JS API

文檔地址

1. AMap.Geolocation 定位插件，整合了瀏覽器定位、精確IP定位、sdk輔助定位多種手段
2. AMap.CitySearch 城市查詢，IP定位獲取當前城市信息

微信公衆號：前端linong