文章目录

前提

  这几天在菜鸟学习 HTML5 教程，学到地理定位，发现一个很严重的问题，Google 地理位置服务早已不提供给我国，然，各大教程的代码和方法，都是由 Google 服务支持的，那不就不可用了么？

  菜鸟教程：HTML5 Geolocation（地理定位）

  我的学习方法是必须照着敲一遍，然后再各大浏览器运行测试一遍，若都可兼容运行那我才会去消化掉这些知识。所以，我把代码放去 Edge（Chrome）、360（IE/Chrome）、Firefox、Safari、Opera 去运行，发现，仅仅只有 Edge 可获取经纬度等数据，其他浏览器各种毛病，要么直接提示不支持或地理信息不可用，要么无反应啥都没出现（由于各种原因 Googel 浏览器在我电脑残留 "卡bug" 无法使用，IE也用360替着测了）。 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<input type="button" onclick="getLocation()" value="确认" />
	<div id="position"></div>
	<script type="text/javascript">
		var x = document.getElementById('position');
		function getLocation() {
			// if (navigator.geolocation) {
			try {
				navigator.geolocation.getCurrentPosition(
					function getLocationSuccess(e) {
						x.innerHTML = '纬度：' + e.coords.latitude +
						'<br/>经度：' + e.coords.longitude;
					},
					function getLocationError(err) {
						switch (err.code) {
							case err.PERMISSION_DENIED:
								x.innerHTML = '用户拒绝对获取地理位置的请求。<br/>' + err.message;
								break;
							case err.POSITION_UNAVAILABLE:
								x.innerHTML = '位置信息是不可用的。<br/>' + err.message;
								break;
							case err.TIMEOUT:
								x.innerHTML = '请求用户地理位置超时。<br/>' + err.message;
								break;
							case err.UNKNOWN_ERROR:
								x.innerHTML = '未知错误。<br/>' + err.message;
								break;
						}
					}
				);
			// } else {
			} catch (err) {
				x.innerHTML = '该浏览器不支持获取地理位置。';
			}
		}
	</script>
</body>
</html>
  • Edge（正常运行）：
    在这里插入图片描述
  • 360（IE/Chrome）、Firefox、Safari、Opera：
    在这里插入图片描述

  那怎么办，都无法运行，无法使用，那岂不是白学？这么常用的功能跳过也不是办法。所以，我的选择是——使用第三方API（国内）。

百度地图 API （简单教程）

  PS：我仿着菜鸟教程分步演示，方便小伙伴们更容易理解和学习。

1. 获取经纬度

用到的 API 方法和属性：
BMap.Geolocation() - 创建百度地图实例对象；
point.lng - 获取纬度；
point.lat - 获取经度；
address.city 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<!--引入百度 API，"ak=" 后面一串码是密钥，最好自己申请-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
</head>
<body>
	<input type="button" onclick="getLocation()" value="确认" />
	<div id="position"></div>
	<script type="text/javascript">
		var x = document.getElementById('position');
		function getLocation() {
			// 创建百度地理位置实例，代替 navigator.geolocation
			var geolocation = new BMap.Geolocation();
			// 其实可不需要判断，API兼容到了IE5
			try {
				geolocation.getCurrentPosition(function(e) {
					// 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
					x.innerHTML = '城市：' + e.address.city + '<br/>纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
				});
			} catch (err) {
				x.innerHTML = '该浏览器不支持获取地理位置。';
				console.log(err);
			}
		}
	</script>
</body>
</html>

在这里插入图片描述

2. 处理错误和拒绝

getStatus() 返回的状态码
常量描述返回值
BMAP_STATUS_SUCCESS检索成功对应数值 "0"
BMAP_STATUS_CITY_LIST城市列表对应数值 "1"
BMAP_STATUS_UNKNOWN_LOCATION位置结果未知对应数值 "2"
BMAP_STATUS_UNKNOWN_ROUTE导航结果未知对应数值 "3"
BMAP_STATUS_INVALID_KEY非法密钥对应数值 "4"
BMAP_STATUS_INVALID_REQUEST非法请求对应数值 "5"
BMAP_STATUS_PERMISSION_DENIED没有权限对应数值 "6" (自 1.1 新增)
BMAP_STATUS_SERVICE_UNAVAILABLE服务不可用对应数值 "7" (自 1.1 新增)
BMAP_STATUS_TIMEOUT超时对应数值 "8" (自 1.1 新增)
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<!--引入百度 API，"ak=" 后面一串码是密钥，最好自己申请-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
</head>
<body>
	<input type="button" onclick="getLocation()" value="确认" />
	<div id="position"></div>
	<script type="text/javascript">
		var x = document.getElementById('position');
		function getLocation() {
			// 创建百度地理位置实例，代替 navigator.geolocation
			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(e) {
				// 检测用户是否拒绝授权
				if(e.accuracy != null){
					switch (this.getStatus()) {
						// 检索成功。BMAP_STATUS_SUCCESS
						case 0:
							// 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
							x.innerHTML = '城市：' + e.address.city + '<br/>纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
							break;
						// 位置结果未知。BMAP_STATUS_UNKNOWN_LOCATION
						case 2:
							x.innerHTML = '位置结果未知。';
							break;
						// 导航结果未知。BMAP_STATUS_UNKNOWN_ROUTE
						case 3:
							x.innerHTML = '导航结果未知。';
							break;
						// 非法密钥。BMAP_STATUS_INVALID_KEY
						case 4:
							x.innerHTML = '非法密钥。';
							break;
						// 非法请求。BMAP_STATUS_INVALID_REQUEST
						case 5:
							x.innerHTML = '非法请求。';
							break;
						// 没有权限。BMAP_STATUS_PERMISSION_DENIED
						case 6:
							x.innerHTML = '没有权限。';
							break;
						// 服务不可用。BMAP_STATUS_SERVICE_UNAVAILABLE
						case 7:
							x.innerHTML = '服务不可用。';
							break;
						// 超时。BMAP_STATUS_TIMEOUT
						case 8:
							x.innerHTML = '超时。';
							break;
					}
				} else {
					x.innerHTML = '用户拒绝对获取地理位置的请求。';
				}
			});
		}
	</script>
</body>
</html>

在这里插入图片描述

3. 在地图中显示结果

百度地图API功能：
new BMap.Map("id") - 创建地图实例；
new BMap.Point(116.331398,39.897445) - 设置地图默认标注"北京"；
centerAndZoom() - 初始化地图；
map.enableScrollWheelZoom(true) - 允许鼠标滚轮缩放地图；
map.clearOverlays() - 清除地图上的遮盖物；
new BMap.Marker() - 创建标注实例；
map.addOverlay() - 添加遮盖物触发事件；
map.panTo() - 将中心点改为指定标注；
👉更多功能方法详情：百度地图JSAPI WebGL v1.0类参考 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<!--引入百度 API，"ak=" 后面一串码是密钥，最好自己申请-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
</head>
<body>
	<input type="button" onclick="getLocation()" value="确认" />
	<div id="mapholder" style="height: 300px;width: 300px;"></div>
	<div id="position"></div>
	<script type="text/javascript">
		// 百度地图API功能
		var map = new BMap.Map("mapholder");	// 注意 id
		var point = new BMap.Point(116.331398,39.897445);	// 设置地图默认标注"北京"
		map.centerAndZoom(point,11);
		map.enableScrollWheelZoom(true);	// 允许鼠标滚轮缩放地图

		var x = document.getElementById('position');
		function getLocation() {
			// 创建 geolocation 实例，代替 navigator.geolocation
			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(e) {
				console.log(e.accuracy);
				// 检测用户是否拒绝授权
				if(e.accuracy !== null){
					switch (this.getStatus()) {
						// 检索成功。BMAP_STATUS_SUCCESS
						case 0:
							// 清除地图上的遮盖物
							map.clearOverlays();

							// 创建标注实例
							var marker = new BMap.Marker(e.point);

							// 将标注添加到地图中
							map.addOverlay(marker);
							map.panTo(e.point);

							// 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
							x.innerHTML = '城市：' + e.address.city + '<br/>纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
							break;
						// 位置结果未知。BMAP_STATUS_UNKNOWN_LOCATION
						case 2:
							x.innerHTML = '位置结果未知。';
							break;
						// 导航结果未知。BMAP_STATUS_UNKNOWN_ROUTE
						case 3:
							x.innerHTML = '导航结果未知。';
							break;
						// 非法密钥。BMAP_STATUS_INVALID_KEY
						case 4:
							x.innerHTML = '非法密钥。';
							break;
						// 非法请求。BMAP_STATUS_INVALID_REQUEST
						case 5:
							x.innerHTML = '非法请求。';
							break;
						// 没有权限。BMAP_STATUS_PERMISSION_DENIED
						case 6:
							x.innerHTML = '没有权限。';
							break;
						// 服务不可用。BMAP_STATUS_SERVICE_UNAVAILABLE
						case 7:
							x.innerHTML = '服务不可用。';
							break;
						// 超时。BMAP_STATUS_TIMEOUT
						case 8:
							x.innerHTML = '超时。';
							break;
					}
				} else {
					x.innerHTML = '用户拒绝对获取地理位置的请求。';
				}
			});
		}
	</script>
</body>
</html>

注意！！！！！

  有一点需要注意，百度地图API，在 Safari 中无法对用户是否允许请求做除判断！！！（不清楚是兼容BUG还是什么原因）
  关于其它浏览器的请求判断，因为找不到官方的方法，所以百度很久才找到这个：

在这里插入图片描述

Edge（Chrome）、360（IE/Chrome）、Firefox、Opera
  • 请求允许：
    在这里插入图片描述
  • 请求拒绝：
    在这里插入图片描述
Safari
  • 请求允许：
    在这里插入图片描述
  • 请求拒绝：
    在这里插入图片描述
  无奈，我找遍了百度也找不到解决 Safari 问题的办法，除非用自带 Geolocation API，但是这就又回到刚开始我说的，无法获取由 Google 提供的地理信息了。
  关于Safari，要么不设置是否授权，直接获取用户地理信息，要么试试其它 API。（可能百度API也有吧，但是我真没找到对用户请求选择进行判断的函数或属性）

【Safari】去掉 e.accuracy !== null，放弃对请求判断
   PS：造成的结果是，无论允不允许，都直接返回地理位置。
  • 请求允许：
    在这里插入图片描述
  • 请求拒绝：
    在这里插入图片描述

其余国内地图 API 有：腾讯地图、高德地图、天地图...

Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局