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

linong

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

这节课其实很简单,一句话,国内用不了地理定位API。好了,开始我们今天的课程。测试地址

原生API

地理位置API 通过 navigator.geolocation 来获取。必须支持 https。必须授权。必须可以访问google(因为使用的人家的服务)所以科学上网。

clipboard.png

clipboard.png

clipboard.png


  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

clipboard.png

阅读 2.4k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

22.8k 声望
4.8k 粉丝
0 条评论

Read-Search-Ask

22.8k 声望
4.8k 粉丝
文章目录
宣传栏