前端最基礎的就是 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
- 瀏覽器定位 優先調用瀏覽器H5定位接口,如果失敗會調用IP定位
- IP定位 根據用戶IP 返回城市級別的定位結果
- 定位SDK輔助定位 當您的APP中有內置的Web頁面,同時在Web頁面需要提供您的當前位置信息時,可調用集成在App中的百度地圖定位SDK來獲取更精準的位置信息
高德地圖
JS API
-
AMap.Geolocation
定位插件,整合了瀏覽器定位、精確IP定位、sdk輔助定位多種手段 -
AMap.CitySearch
城市查詢,IP定位獲取當前城市信息
微信公衆號:前端linong