前端培训-中级阶段(18）- 地理定位（Geolocation）API（2019-9-26期）-阿里云开发者社区

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

2022-04-26 206

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。这节课其实很简单，一句话，国内用不了地理定位API。好了，开始我们今天的课程。测试地址

原生API

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

bVbyjuZ.webp.jpg

bVbyju5.webp.jpg

bVbyjAr.webp.jpg

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);
  });