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

简介: 前端最基础的就是 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);
  });


百度地图



Web API


文档地址

接口https://api.map.baidu.com/location/ip


JavaScript API


文档地址

  1. 浏览器定位 优先调用浏览器H5定位接口,如果失败会调用IP定位


  1. IP定位 根据用户IP 返回城市级别的定位结果


  1. 定位SDK辅助定位 当您的APP中有内置的Web页面,同时在Web页面需要提供您的当前位置信息时,可调用集成在App中的百度地图定位SDK来获取更精准的位置信息


高德地图



JS API


文档地址

  1. AMap.Geolocation 定位插件,整合了浏览器定位、精确IP定位、sdk辅助定位多种手段


  1. AMap.CitySearch 城市查询,IP定位获取当前城市信息
相关文章
|
2月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
92 2
|
3月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
2月前
|
前端开发
前端基础(十三)_定位position、定位层级z-index
本文讲解了CSS中的定位机制,包括静态定位、相对定位、绝对定位和固定定位,并通过实例展示了如何使用这些定位方法调整元素位置。同时,还介绍了z-index属性的使用,解释了如何通过调整z-index值来改变定位元素的层叠顺序。
35 6
前端基础(十三)_定位position、定位层级z-index
|
1月前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
156 0
|
2月前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
3月前
|
JSON 前端开发 API
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
|
2月前
|
前端开发
|
3月前
|
JavaScript 前端开发 API
Vue.js 3.x新纪元:Composition API引领潮流,Options API何去何从?前端开发者必看的抉择指南!
【8月更文挑战第30天】Vue.js 3.x 引入了 Composition API,为开发者提供了更多灵活性和控制力。本文通过示例代码对比 Composition API 与传统 Options API 的差异,帮助理解两者在逻辑复用、代码组织、类型推断及性能优化方面的不同,并指导在不同场景下的选择。Composition API 改善了代码可读性和维护性,尤其在大型项目中优势明显,同时结合 TypeScript 提供更好的类型推断和代码提示,减少错误并提升开发效率。尽管如此,在选择 API 时仍需考虑项目复杂性、团队熟悉度等因素。
51 0
|
3月前
|
前端开发 容器
解锁CSS定位奥秘,从迷茫到精通,让你的网页布局“稳如老狗”,引领前端新潮流!
【8月更文挑战第23天】本文深入探讨了Web前端开发中CSS定位的三大基石:相对定位、绝对定位与固定定位。通过具体示例,展示了各种定位方式的特点及应用场景。相对定位可在不影响布局的情况下微调元素位置;绝对定位使元素完全脱离文档流,适用于精确控制位置的需求;固定定位则确保元素始终固定于浏览器窗口特定位置,不受页面滚动影响。这些技巧对于实现复杂网页布局至关重要。
58 0
|
3月前
|
开发框架 前端开发 API
使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理
使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理