【原生javascript项目】Geolocation 21

作者：©Iaine 万一
简介：30 Day Challenge是 Wes Bos 设计的一个 30 天原生js编程挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。

本项目为第21天的“地理位置”项目。Have fun with the website! ♪(^∇^*)

源代码：https://github.com/janice143/JavaScript30Program/tree/master/21%20geoLocation/index.html

项目描述

本项目是一个可视化的指南，利用网络地址位置Web Geolocation API获取的地理位置和速度。

本项目的JS代码相对比较简单，但是由于电脑一般没有速度及方向传感器，所以实际的功能并没显示出来，只是提供了一种实现途径。

项目重点

Geolocation.watchPosition() API
- .coords.speed
- .coords.heading
CSS radial-gradient
background-attachment设置背景图是否固定不到

项目过程

HTML部分

svg图片元素
h1元素
- 类名为speed-value span标签
- 类名为speed-unit span标签

CSS部分

设置背景图片

radial-gradient由圆心向外的径向的颜色渐变

1	radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px

JS部分

JS的大致思路是：

请求调用Geolocation接口
获取当前的地理位置信息data
显示速度信息 data.coords.speed
改变页面中指南针的朝向 data.coords.heading

具体代码如下：

navigator.geolocation.watchPosition((data) => {
    console.log(data);
    speed.textContent = data.coords.speed;
    arrow.style.transform = `rotate(${data.coords.heading}deg)`;
}, (err) => {
    console.error(err);
});