前端培训-中级阶段（18）- 地理定位(Geolocation)API（2019-09-26期）

Sep 30, 2019

思否

前端最基础的就是 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

原文：SegmentFault