前端培训中级阶段18-地理定位GeolocationAPI20190926期

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