Web APl
Web API 是开发人员的梦想。
它可以扩展浏览器的功能
它可以极大简化复杂的功能
它可以为复杂的代码提供简单的语法
什么是 Web API？
API 指的是应用程序编程接口（Application Programming Interface）。
Web API 是 Web 的应用程序编程接口。
浏览器 API 可以扩展 Web 浏览器的功能。
服务器 API 可以扩展 Web 服务器的功能。
浏览器 API（）
所有浏览器都有一组内置的 Web API （封装好的函数）来支持复杂的操作，并帮助访问数据。
例如，Geolocation API 可以返回浏览器所在位置的坐标。
获取用户所在位置的经纬度：
const myElement = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
myElement.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
myElement.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}第三方 API
第三方 API 未内置于您的浏览器中。
要使用这些 API，您必须从 Web 下载代码。
举例：
YouTube API - 允许您在网站上显示视频。
Twitter API - 允许您在网站上显示推文。
Facebook API - 允许您在网站上显示 Facebook 信息。
JavaScript 验证 API
约束验证 DOM 方法
1.checkValidity()方法和validationMessage
使用checkValidity()方法可以检查输入的合法性，使用validationMessage可以查看输入的错误提示信息：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证API</title>
<script>
function Fun(){
// checkValidity()函数用来检验输入内容是否合法
if(document.getElementById("input1").checkValidity()){
document.getElementById("p1").innerHTML = "合法";
}
else{
// validationMessage属性用来查看不合法的信息
document.getElementById("p1").innerHTML = document.getElementById("input1").validationMessage;
}
}
</script>
</head>
<body>
请输入10~20的数字：
<input id="input1" min="10" max="20" type="number" required>
<button onclick="Fun()">确认</button>
<p id="p1"></p>
</body>
</html>
Validity 属性
input 元素的 validity 属性包含一系列关于 validity 数据属性
customError 设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch 设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow 设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow 设置为 true, 如果元素的值小于它的最小值。
stepMismatch 设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong 设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch 设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing 设置为 true，如果元素 (required 属性) 没有值。
valid 设置为 true，如果元素的值是合法的。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字小于 100 ( input 的 min 属性), 会显示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
var inpObj = document.getElementById("id1");
if(!isNumeric(inpObj.value)) {
txt = "你输入的不是数字";
} else if (inpObj.validity.rangeUnderflow) {
txt = "输入的值太小了";
} else {
txt = "输入正确";
}
document.getElementById("demo").innerHTML = txt;
}
// 判断输入是否为数字
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
</body>
</html>Web History API
Web History API 提供了访问 windows.history 对象的简单方法。
window.history 对象包含用户访问过的 URL（网站）。
所有浏览器都支持 Web History API：
History 接口，允许操作浏览器的 session history，比如在当前tab下浏览的所有页面或者当前页面的会话记录。
1、length(只读)
返回一个总数，代表当前窗口下的所有会话记录数量，包括当前页面。如果你在新开的一个tab里面输入一个地址，当前的length是1，如果再输入一个地址，就会变成2；
假设当前总数已经是6，无论是浏览器的返回还是 history.back(), 当前总数都不会改变。
2、scrollRestoration(实验性API)
允许web应用在history导航下指定一个默认返回的页面滚动行为，就是是否自动滚动到页面顶部；默认是 auto, 另外可以是 manual(手动)
3、 state (当前页面状态)
history方法
1、 back()
返回历史记录会话的上一个页面，同浏览器的返回，同 history.go(-1)
2、forward()
前进到历史会话记录的下一个页面，同浏览器的前进，同 history.go(1)
3、go()
从session history里面加载页面，取决于当前页面的相对位置，比如 go(-1) 是返回上一页，go(1)是前进到下一个页面。
如果你直接一个超过当前总length的返回，比如初始页面，没有前一个页面，也没有后一个页面，这个时候 go(-1) 和 go(1),都不会有任何作用；
如果你不指定任何参数或者go(0),将会重新加载当前页面；
4、pushState(StateObj, title, url)
把提供的状态数据放到当前的会话栈里面，如果有参数的话，一般第二个是title，第三个是URL。
这个数据被DOM当做透明数据；你可以传任何可以序列号的数据。不过火狐现在忽略 title 这个参数；
这个方法会引起会话记录length的增长。
5、replaceState(StateObj, title, url)
把提供的状态数据更新到当前的会话栈里面最近的入口，如果有参数的话，一般第二个是title，第三个是URL。
这个数据被DOM当做透明数据；你可以传任何可以序列号的数据。不过火狐现在忽略 title 这个参数；
这个方法不会引起会话记录length的增长。
综上所述，pushState 和 replaceState 是修改当前session history的两个方法，他们都会触发一个方法 onpopstate 事件;
2、两种路由模式的生成
以下说明仅存在于当前路由是 history 模式；
说道 webpack-dev-server的 historyApiFallback 就不得不说下 VUE 前端路由，路由跳转原理；
传统的web开发中，大多是多页应用，每个模块对应一个页面，在浏览器输入相关页面的路径，然后服务端处理相关浏览器的请求，通过HTTP把资源返回给客户端浏览器进行渲染。
传统开发，后端定义好路由的路径和请求数据的地址；
随着前端的发展，前端也承担着越来越大的责任，比如Ajax局部刷新数据，前端可以操控一些历史会话，而不用每次都从服务端进行数据交互。
history.pushState 和 history.replaceState ，这两个history新增的api，为前端操控浏览器历史栈提供了可能性
/**
* @data {object} state对象 最大640KB, 如果需要存很大的数据，考虑 sessionStorage localStorage
* @title {string} 标题
* @url {string} 必须同一个域下，相对路径和绝对路径都可以
*/
history.pushState(data, title, url) //向浏览器历史栈中增加一条记录。
history.replaceState(data, title, url) //替换历史栈中的当前记录。
这两个Api都会操作浏览器的历史栈，而不会引起页面的刷新。不同的是，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。所需的参数相同，在将新的历史记录存入栈后，会把传入的data（即state对象）同时存入，以便以后调用。同时，这俩api都会更新或者覆盖当前浏览器的title和url为对应传入的参数。
// 假设当前的URL： http://test.com
history.pushState(null, null, "/login");
// http://test.com ---->>> http://test.com/login
history.pushState(null, null, "http://test.com/regiest");
// http://test.com ---->>> http://test.com/regiest
// 错误用法
history.pushState(null, null, "http://baidu.com/regiest");
// error 跨域报错
Web Storage API
Web Storage API 是一种用于在浏览器中存储和检索数据的简单语法。他非常容易使用：
Web Storage有两种存储方式：
1.sessionStorage: 对于每一个访问源，都会维持一个独立的存储区域。只要浏览器不关闭，这些数据都不会消失。
所以这种存储叫做session存储。
注意，这里的session和服务器端的session的意思是不一样的，这里的sessionStorage只是本地的存储，并不会将数据传输到服务器端。
sessionStorage的存储容量要比cookie大得多，可以达到5MB。
2.localStorage：和sessionStorage类似，也是用来做数据存储的，不同的是localStorage存储的数据不会随着浏览器的关闭而消失。
我们可以通过设置过期时间，使用javascript手动删除或者清除浏览器缓存来清除localStorage。
Web Storage相关接口
和web storage相关的接口有三个。
第一就是刚刚讲到的window。我们可以通过window获取sessionStorage和localStorage。
第二个就是Storage对象，获取到的两个Storage都是Storage对象。
interface Storage {
readonly length: number;
clear(): void;
getItem(key: string): string | null;
key(index: number): string | null;
removeItem(key: string): void;
setItem(key: string, value: string): void;
[name: string]: any;
}我们可以看到Storage对象为我们提供了很多有用的方法，对数据进行存取。
第三个就是StorageEvent，当storage发现变化的时候就会触发StorageEvent事件。
使用Web Storage API
对于Storage对象，我们可以像普通对象一样直接访问对象中的属性，也可以使用Storage.getItem() 和 Storage.setItem() 来访问和设置属性。
注意Storage对象中的key value都是string类型的，即使你输入的是integer，也会被转换成为String。
下面的例子，都可以设置一个
colorSetting属性：
localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');虽然三种方式都可以实现存取的功能，但是我们推荐使用Web Storage API：setItem, getItem, removeItem, key, length等。
除了对Storage中的值进行设置之外，我们还可以触发和监听StorageEvent。
先看一下StorageEvent的定义：
interface StorageEvent extends Event {
readonly key: string | null;
readonly newValue: string | null;
readonly oldValue: string | null;
readonly storageArea: Storage | null;
readonly url: string;
}每当Storage对象发送变化的时候，就出触发StorageEvent事件。
注意，如果是sessionStorage的变化，则不会被触发。
如果一个domain中的某个页面发生了Storage的变化，那么这个domain的其他页面都会监听到这个变化。当然，如果是其他domain的话，是监听不到这个StorageEvent的。
我们可以通过window的addEventListener方法，来添加storage事件，如下所示：
window.addEventListener('storage', function(e) {
document.querySelector('.my-key').textContent = e.key;
document.querySelector('.my-old').textContent = e.oldValue;
document.querySelector('.my-new').textContent = e.newValue;
document.querySelector('.my-url').textContent = e.url;
document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
});上面的例子中，我们从StorageEvent中获取了key，oldValue，newValue，url和Storage对象。
localStorage 对象
localStorage 对象提供对特定网站的本地存储的访问。它允许您存储、读取、添加、修改和删除该域的数据项。
存储的数据没有到期日期，并且在浏览器关闭时不会被删除。
这些数据将在几天、几周和几年内均可用。
setItem() 方法
localStorage.setItem() 方法将数据项存储在 storage 中。
它接受一个名称和一个值作为参数：
实例
localStorage.setItem("name", "Bill Gates");
getItem() 方法
localStorage.getItem() 方法从存储（storage）中检索数据项。
它接受一个名称作为参数：
实例
localStorage.getItem("name");
sessionStorage 对象
sessionStorage 对象与 localStorage 对象相同。
不同之处在于 sessionStorage 对象存储会话的数据。
当浏览器关闭时，数据会被删除。
实例
sessionStorage.getItem("name");
setItem() 方法
sessionStorage.setItem() 方法将数据项存储在存储（storage）中。
它接受一个名称和一个值作为参数：
实例
sessionStorage.setItem("name", "Bill Gates");
getItem() 方法
sessionStorage.getItem() 方法从存储（storage）中检索数据项。
它接受一个名称作为参数：
实例
sessionStorage.getItem("name");
Storage 对象属性和方法
Web Storage API 相关页面
Web Worker API
在 HTML 页面中执行脚本时，页面在脚本完成之前是无响应的。
Web Worker 是在后台运行的 JavaScript，独立于其他脚本，不会影响页面的性能。你可以继续做任何你想做的事情：点击、选取内容等，同时 web worker 在后台运行。
创建 Web Worker 对象
现在我们有了 web worker 文件，我们需要从 HTML 页面调用它。
以下代码行检查 worker 是否已存在，如果不存在，它会创建一个新的 web worker 对象并运行 "demo_workers.js" 中的代码：
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
然后我们可以发送和接收来自 web worker 的消息。
向 web worker 添加一个 "onmessage" 事件侦听器。
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
当 Web Worker 发布消息时，将执行事件侦听器中的代码。来自 Web Worker 的数据存储在 event.data 中。
终止 Web Worker
当 web worker 对象被创建时，它会继续监听消息（即使在外部脚本完成之后）直到它被终止。
如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：
w.terminate();
重用 Web Worker
如果将 worker 变量设置为 undefined，则在它终止后，您可以重用以下代码：
w = undefined;
完整的 Web Worker 实例代码
我们已经在 .js 文件中看到了 Worker 代码。下面是 HTML 页面的代码：
实例
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Web Worker 和 DOM
由于 Web Worker 位于外部文件中，因此他们无法访问以下 JavaScript 对象：
window 对象
document 对象
parent 对象
Web Workers API 是HTML5的一项技术，它允许在浏览器后台独立于主线程运行脚本，即允许进行多线程处理。这对于执行密集型计算任务特别有用，因为它可以防止这些任务阻塞用户界面，从而保持网页的响应性和交互性。Web Workers在自己的线程中运行，拥有自己的事件循环和消息传递系统，与主线程进行通信。
概念
主线程与工作线程：Web页面默认在主线程上执行JavaScript，负责UI渲染和事件处理。Web Workers提供了工作线程，使得耗时操作可以在后台进行，避免影响用户体验。
类型
：Web Workers主要有两种类型：
Dedicated Worker：每个Dedicated Worker与创建它的脚本一对一通信，适用于单个任务的后台处理。
Shared Worker：可以被多个脚本共享，适合多个页面或标签共享数据和资源的场景。
用法
创建Worker对象：首先，需要创建一个新的Worker对象，并传入一个脚本URL作为参数。这个脚本将在新的线程中执行。
发送消息：使用postMessage()方法从主线程向Worker线程发送数据。
监听消息：在Worker线程中，通过监听onmessage事件来接收主线程发来的消息。
返回结果：Worker线程也可以通过调用自身的postMessage()方法向主线程发送数据。
终止Worker：使用terminate()方法可以停止Worker线程。
使用限制
同源限制：Worker线程运行的脚本文件必须与主线程的脚本文件同源。
DOM限制：Worker线程无法读取主线程所在网页的DOM对象。
通信联系：Worker线程和主线程不能直接通信，必须通过消息完成。
脚本限制：Worker线程不能执行alert()和confirm()方法。
文件限制：Worker线程无法读取本地文件，只能加载来自网络的脚本。
使用场景
复杂计算：如大数据处理、图像处理或加密解密等计算密集型任务。
长时间运行的任务：如轮询服务器、实时数据分析等。
异步I/O操作：虽然通常使用Fetch API或XMLHttpRequest，但在某些特殊情况下，Worker可以用于执行这些操作而不阻塞UI。
使用步骤
创建Worker：首先，在一个单独的JavaScript文件中编写将在工作线程中执行的代码。然后，在主线程中使用Worker构造函数创建一个新的Worker实例，传入这个文件的URL。
let worker = new Worker('worker.js');
发送消息：主线程和工作线程之间通过postMessage方法传递消息。
主线程发送消息到Worker：
worker.postMessage([firstValue, secondValue]);
其中message可以是文本，也可以是对象。需要注意的是，这种通信是拷贝关系，即是传值而不是传址，Worker 对通信内容的修改，不会影响到主线程。事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给 Worker，后者再将它还原。主线程与 Worker 之间也可以交换二进制数据，比如 File、Blob、ArrayBuffer 等类型，也可以在线程之间发送,但是一旦二级制数据量太大，会导致性能问题。
transfer可转移对象是如ArrayBuffer，MessagePort或ImageBitmap等二进制数据。JavaScript 允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects。这使得主线程可以快速把数据交给 Worker，对于影像处理、声音处理、3D 运算等就非常方便了，不会产生额外的性能负担。
监听消息：使用onmessage事件监听器接收来自其他线程的消息。
Worker接收主线程消息：
self.onmessage = function(e) {
let data = e.data;
// 处理数据...
self.postMessage(result);
};
主线程接收Worker消息：
worker.onmessage = function(e) {
let result = e.data;
// 更新UI或做其他处理...
};
终止Worker：当不再需要Worker时，应使用terminate方法结束其生命周期。
worker.terminate();
Worker线程（worker.js）
self.onmessage = function(e) { // 接收主线程的消息
var data = e.data; // 获取传入的数据
var result = data[0] * data[1]; // 执行计算
self.postMessage(result); // 将结果发送回主线程
在这个例子中，当用户点击“开始计算”按钮时，主线程会启动一个Worker，并向其发送两个数字。Worker接收到这两个数字后，计算它们的乘积，并将结果发送回主线程，最后在页面上显示出来。这样，即使计算过程耗时较长，也不会影响页面的其他交互。
JavaScriptFetch API
Fetch API 实例
下面的例子获取文件并显示内容：
实例
fetch(file)
.then(x => x.text())
.then(y => myDisplay(y));
由于 Fetch 基于 async 和 await，因此上面的例子这么写可能更容易理解：
实例
async function getText(file) {
let x = await fetch(file);
let y = await x.text();
myDisplay(y);
}
甚至可以更好：请使用易于理解的名称而不是 x 和 y：
实例
async function getText(file) {
let myObject = await fetch(file);
let myText = await myObject.text();
myDisplay(myText);
}在JavaScript的浩瀚宇宙中，Fetch API以简洁的语法和强大的功能，彻底改变了我们处理网络请求的方式。今天，我们就来一场关于Fetch API的深度探索，特别是如何在JavaScript中优雅地使用它来进行异步请求，让你的代码更加简洁、高效且易于维护。
🤔 Fetch API 是什么？
简单来说，Fetch API提供了一个全局的fetch()方法，用于在JavaScript中发起网络请求。与传统的XMLHttpRequest相比，Fetch API基于Promise设计，使得异步操作更加直观、易于理解和维护。它支持请求和响应的多种类型，包括JSON、Blob、FormData等，让开发者能够轻松处理各种网络数据。
💡 Fetch API 的用途
发起网络请求：无论是GET、POST、PUT还是DELETE请求，fetch()都能轻松应对。通过传递不同的参数和选项，你可以定制请求的各种细节，如请求头、请求体等。
处理响应：fetch()方法返回一个Promise对象，该对象解析为响应对象（Response）。你可以通过调用响应对象上的方法来处理响应数据，如response.json()用于解析JSON数据，response.text()用于获取文本数据等。
错误处理：由于fetch()基于Promise，你可以使用.catch()方法来捕获并处理请求过程中发生的错误。这使得错误处理变得更加集中和方便。
🔍 Fetch的基本用法
使用fetch()方法发起一个GET请求非常简单，只需要将请求的URL作为参数传递给fetch()即可。但是，fetch()方法返回的是一个Promise对象，因此我们需要使用.then()来处理响应。
下面是一个使用Fetch API发起GET请求并处理JSON响应的示例代码：
javascript复制代码
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 解析JSON数据
})
.then(data => {
console.log(data); // 处理数据
})
.catch(error => {
console.error('There was a problem with your fetch operation:', error);
});
'运行运行
在这个例子中，我们首先使用fetch()方法发起了一个GET请求。然后，我们使用.then()链来处理响应。在第一个.then()中，我们检查了响应的ok属性以确保HTTP状态码在200-299范围内。如果响应不OK，我们抛出一个错误。如果响应OK，我们调用response.json()来解析JSON数据，并将其传递给下一个.then()进行处理。如果在请求过程中发生任何错误，.catch()会捕获这些错误并打印到控制台。
🔧 Fetch的高级用法
设置请求头部
fetch()方法的第二个参数是一个可选的配置对象，你可以在其中设置请求的方法、头部信息、请求体等。
javascript复制代码
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer your-access-token'
},
body: JSON.stringify({
key: 'value'
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
'运行运行
处理响应类型
fetch()方法默认不会从服务器解析或拒绝任何内容。你需要自己决定如何处理响应的body部分，这通常是通过调用如response.json(), response.text(), 或 response.blob()等方法来实现的。
使用async/await
由于fetch()返回的是一个Promise，因此我们可以使用async/await语法来简化异步代码的编写。
javascript复制代码
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('There was a problem with your fetch operation:', error);
}
}
fetchData();
'运行运行
💡 小贴士
总是检查响应的ok属性（response.ok），这是一个布尔值，表示响应的HTTP状态码在200-299范围内。
使用async/await可以使异步代码看起来和同步代码一样，提高代码的可读性和可维护性。
当处理敏感信息（如认证令牌）时，请确保通过HTTPS发送请求，以保护数据安全。
🚀 结语
Fetch API的强大之处在于其灵活性和易用性。你可以用它来构建各种网络请求，无论是获取数据、提交表单还是与RESTful API交互。掌握Fetch API，将让你的JavaScript开发之路更加顺畅。
WebGeolocationAPI
定位用户的位置
HTML Geolocation API 用于获取用户的地理位置。
由于这可能会损害隐私，除非用户批准，否则位置不可用。
getCurrentPosition() 方法用于返回用户的位置。
下面的例子返回用户位置的纬度和经度：
实例
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
例子解释：
检查是否支持 Geolocation
如果支持，请运行 getCurrentPosition() 方法。如果没有，则向用户显示一条消息
如果 getCurrentPosition() 方法成功，则返回一个 coordinates 对象给参数 (showPosition) 中规定的函数
showPosition() 函数输出纬度和经度
上面的例子是一个非常基本的地理定位脚本，没有错误处理。
处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。如果无法获取用户的位置，它规定要运行的函数：
实例
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
在地图中显示结果
如需在地图中显示结果，您需要访问地图服务，例如 Google 地图。
在下面的例子中，返回的纬度和经度用于在 Google 地图中显示位置（使用静态图像）：
实例
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Location-specific 信息
此页面演示了如何在地图上显示用户的位置。
Geolocation 对于特定于位置的信息也非常有用，例如：
最新的本地信息
显示用户附近的兴趣点
逐向导航（Turn-by-turn navigation）(GPS)
getCurrentPosition() 方法 - 返回数据
getCurrentPosition() 方法在成功时返回一个对象。会始终返回纬度、经度和精度属性。如果可用，则返回其他属性：
Geolocation 对象 - 其他有趣的方法
Geolocation 对象还有其他有趣的方法：
watchPosition()- 返回用户的当前位置，并随着用户移动（如汽车中的 GPS）继续返回更新的位置。clearWatch()- 停止 watchPosition () 方法。
下面的例子展示了 watchPosition() 方法。你需要准确的 GPS 设备来测试（比如智能手机）：
实例
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>