搜索

首页 >web前端 >html教程 >HTML 地理定位

HTML 地理定位

王林
王林原创
2024-09-04 16:51:16563浏览

到目前为止，我们已经看到许多功能是使用 HTML 设计的。 HTML 中包含的最新高级功能之一是地理定位。 HTML 地理定位对于检测地图上的用户位置最有用。因此，这个功能是用 HTML 设计的，以识别用户在地图上的确切位置。可以使用特定用户位置的纬度和经度属性来识别用户的位置。仅当用户允许其访问该位置时，它才能检索信息。此 HTML 功能主要用于本地商业目的，用于查找餐馆或在地图上选择位置。

语法

HTML 地理定位的语法如下：可以使用 location API，它将使用全局导航器对象，如下所示：

var locat = navigator.geolocation;

进入上面的语法导航器。 Geolocation负责用户浏览器获取其位置信息；定义了一种访问方式。浏览器可以提供设备上现有的最佳功能，因此人们可以轻松访问这些数据。

可以通过使用不同的方式有效地访问这些数据，例如 getCurrentPosition 来了解用户或设备的当前位置，watchPosition 每当设备位置发生变化时都会很有帮助，还有一种方式像clearWatch 有助于清除地理定位功能中的所有调用。

此功能适用于某些接口，如下所示：

  1. Geolocation：是主类最重要的API之一，其中包括一些帮助获取用户当前位置、观察位置变化等的方法
  2. GeolocationPosition: 用于定义用户的位置。每当在某个地理位置中识别到成功调用时，它将与其对象实例进行协调。
  3. 地理位置坐标：这有助于识别用户位置的坐标。
  4. GeolocationPositionError:调用此接口是因为调用失败返回到地理位置包含的方法中。
  5. Geolocation： 当在 geolocation 中调用 geolocation 对象实例时，这很有用。因此可以从这里访问所有其他功能。

地理定位方法+63

HTML geolocation 中总共使用了 3 种方法来通过 geolocation 接口定义位置；如下：

  1. getCurrentPosition()：HTML 地理定位中的这种基本方法有助于检测设备或用户的当前地理位置及其在地图上的返回数据。此方法适用于不同的参数，例如成功、错误、选项。
  2. watchPosition(): 每当用户想要在设备位置更改后检查位置时，都会在代码中调用此方法来检查更改后的设备位置。此方法调用错误回调函数，例如未知随机错误。如果给定的位置信息不可用并且给定的请求位置超时，则用户不允许共享位置。
  3. clearWatch():人们可以取消之前的 watchPosition() 调用，并且可以使用这种 HTML 地理定位方法取消正在进行的 watchPosition 调用

HTML 地理定位示例

以下是 HTML 地理定位的示例

示例#1

在第一个示例中，我们将查看我们的浏览器是否支持此地理定位功能；这是它的代码，如下所述：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
</head>
<body>
<h4>HTML Geolocation</h4>
<button onclick="getlocation()">Click Here</button>
<br>
<br>
<br>
<p>As we all know, geolocation is the feature used for positioning the exact location of the user or device. But the first step we have to check whether our browser is going to support this geolocation feature or not. </p>
<h4> This Example illustrates whether our browser is going to support for geolocation or not.</h4>
<div id="geolocation1"></div>
<script>
var x= document.getElementById("geolocation1");
function getlocation() {
if(navigator.geolocation){
alert("My browser is going to support Geolocation feature")
}
else
{
alert("Oops! My browser is not going to support Geolocation feature")
}
}
</script>
</body>
</html>

输出：

HTML 地理定位

HTML 地理定位

示例#2

在此示例中，我们将使用 HTML 地理定位功能来显示确切位置，因此它将显示地图上的确切位置，其纬度和经度属性值如下：

HTML 代码：

<!DOCTYPE html>
<html>
<body>
<h4>HTML Geolocation Latitude and Longitude Value</h4>
<p>Example showing Geolocation , It will give values for the latitude and longitude after clicking below button</p>
<button onclick="getLocation()">Click Here</button>
<p id="geolocation"></p>
<script>
var x = document.getElementById("geolocation");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showgeolocPosition);
} else {
x.innerHTML = "This code is not supported in geolocation for your browser";
}
}
function showgeolocPosition(position) {
x.innerHTML = "Latitude Attribute Value: "     + position.coords.latitude +
"<br>Longitude Attribute Value: "  + position.coords.longitude;
}
</script>
</body>
</html>

输出：

HTML 地理定位

点击按钮后，输出如下图

HTML 地理定位

示例 #3

在此示例中，我们将使用 HTML 地理定位功能来显示确切位置，因此它将显示地图上的确切位置，其纬度和经度属性值如下：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
</head>
<style>
#mapdemo{
width: 500px;
height: 500px;
margin-left: 200px;
}
</style>
<body>
<h2>Find Your Location on Google Map</h2>
<p>In this Example we are going to see exact location on Google map, where actually we are.</p>
<button onclick="getlocation();"> Show my position on Map </button>
<div id="mapdemo">
</div>
<script src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function getlocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPos, showErr);
}
else{
alert("Sorry! your Browser does not support Geolocation API")
}
}
// Current Poistion on Google Map
function showPos(position){
latt = position.coords.latitude;
long = position.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
var myOptions = {
center: lattlong,
zoom: 15,
mapTypeControl: true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL}
}
var maps = new google.maps.Map(document.getElementById("mapdemo"), myOptions);
var markers =
new google.maps.Marker({position:lattlong, map:maps, title:"Your position on map!"});
}
function showErr(error) {
switch(error.code){
case error.PERMISSION_DENIED:
alert("User or Device not allow to accept your request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("USer or Device exact location information is currently unavailable.");
break;
case error.TIMEOUT:
alert("Requested request is getting time out .");
break;
case error.UNKNOWN_ERROR:
alert("Something unknown error is accrued.");
break;
}
}        </script>
</body>
</html>

输出：

HTML 地理定位

结论

从以上所有信息中，我们了解到 HTML 地理定位是一种用于在地图上识别设备或用户位置的功能。

它使用纬度和经度属性来识别用户的确切位置。

此功能适用于不同的方法，例如 getCurrentPosition、watchPosition 和clearWatch。

以上是HTML 地理定位的详细内容。更多信息请关注PHP中文网其他相关文章！

html Object define if for Error using class Interface Attribute map this location position Access
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：File Path in HTML下一篇：Embed PHP in HTML

相关文章

查看更多