Exemple de tutoriel sur l'analyse de la géolocalisation HTML5
Adresse github de la démo de test : github.com/lily1010/html5_geolocation
L'API de géolocalisation HTML5 est utilisée pour obtenir la localisation géographique de l'utilisateur. Étant donné que cette fonctionnalité peut violer la confidentialité des utilisateurs, les informations de localisation de l'utilisateur ne sont pas disponibles sans le consentement de l'utilisateur.
1 Recherche HTML5 basée sur un navigateur pour la localisation géographique
La fonction de positionnement GPS en HTML5 est encapsulée dans l'attribut navigator.geolocation. Il existe trois méthodes :
(1) getCurrentPosition n'obtient la position de l'utilisateur qu'une seule fois
(2) watchPosition renvoie la position actuelle de l'utilisateur et continue de renvoyer la position mise à jour lorsque l'utilisateur se déplace (tout comme le GPS sur une voiture).
(3) clearWatch() - Arrêter la méthode watchPosition()
Le format des deux méthodes getCurrentPosition et watchPosition est
getCurrentPosition(successCallback, errorCallback, positionOptions) et watchPosition(successCallback, errorCallback, positionOptions)
(1) successCallback représente la fonction de rappel après que la fonction est appelée avec succès. Cette fonction prend un paramètre, au format littéral d'objet, indiquant l'acquisition des données de localisation de l'utilisateur.
(2) errorCallback représente le code d'erreur renvoyé. Il contient les deux attributs suivants :
1、message：错误信息 2、 code：错误代码。 其中code错误代码包括以下四个值： 1 位置服务被拒绝 2 暂时获取不到位置信息 3 获取信息超时 4 未知错误
(3) Le format de données positionOptions est JSON, et il y a trois attributs facultatifs :
1、enableHighAcuracy — 布尔值： 表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。 2、timeout — 整数： 表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback。 3、maximumAge — 整数/常量： 表示浏览器重新获取位置信息的时间间隔。
Voyons voir ci-dessous Voici un exemple de test : (Notez que le positionnement doit être activé avant de pouvoir voir l'effet)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>基于浏览器的HTML5查找地理位置</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script>
var options={
enableHighAccuracy:true, //高精度定位参数
maximumAge:1000
}
function getLocation(){
if(navigator.geolocation){
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options); //getCurrentPosition 只获取一次用户的地理位置函数
//onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
//navigator.geolocation.watchPosition(onSuccess,onError,options); //watchPosition 继续获取用户的位置,适合于导航
//onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
}else{
//浏览器不支持geolocation
alert ('您的浏览器暂不支持定位');
}
}
//成功时
function onSuccess(position){
//返回用户位置
//经度
var longitude =position.coords.longitude;
//纬度
var latitude = position.coords.latitude;
//精确度
var accuracy = position.coords.accuracy;
//高度精确度
var altitudeAccuracy = position.coords.altitudeAccuracy;
//设备正北顺时针前进的方位
var heading = position.coords.heading;
//设备外部环境的移动速度(m/s)
var speed = position.coords.speed;
//当位置捕获到时的时间戳
var timestamp = position.timestamp;
document.getElementById("container").innerHTML= "您的经度是="+longitude+'<br>'
+"您的纬度是="+latitude+'<br>'+"您的精确度是="+accuracy+'<br>'
+"您的高度精确度是="+altitudeAccuracy+'<br>'+"您的设备正北顺时针前进的方位是="+heading+'<br>'
+"您的设备外部环境的移动速度(m/s)是="+speed+'<br>'+"您的当位置捕获到时的时间戳是="+timestamp+'<br>';
}
//失败时
function onError(error){
switch(error.code){
case 1:alert("位置服务被拒绝");break;
case 2:alert("暂时获取不到位置信息");break;
case 3:alert("获取信息超时");break;
case 4:alert("未知错误");break;
}
}
window.onload=getLocation;
</script>
</head>
<body>
<p id="container" style="300px;height: 300px"></p>
</body>
</html>Il est préférable de tester le code ci-dessus sur un téléphone mobile, car Google Chrome est bloqué en Chine, vous connaître le positionnement
2 appels de géolocalisation HTML5 API de carte Baidu
Adresse manuelle de la carte Baidu : développeur.baidu.com/map/jsdemo-mobile.htm#i7_1
Notez à l'avance que html5 n'est pas un positionnement précis, il y a donc toujours une erreur de plusieurs centaines de mètres lors de la visualisation de l'effet sur la carte
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>基于浏览器的HTML5查找地理位置和调取百度地图api</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 百度API -->
<script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
<script>
var options={
enableHighAccuracy:true, //高精度定位参数
maximumAge:1000
}
function getLocation(){
if(navigator.geolocation){
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options); //getCurrentPosition 只获取一次用户的地理位置函数
//onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
//navigator.geolocation.watchPosition(onSuccess,onError,options); //watchPosition 继续获取用户的位置,适合于导航
//onSuccess成功返回的回调函数(必选),onError失败返回的回调函数(可选),设置精确度等参数(可选options)
}else{
//浏览器不支持geolocation
alert ('您的浏览器暂不支持定位');
}
}
//成功时
function onSuccess(position){
//返回用户位置
//经度
var longitude =position.coords.longitude;
//纬度
var latitude = position.coords.latitude;
//使用百度地图API
//创建地图实例
var map =new BMap.Map("container");
//创建一个坐标
var point =new BMap.Point(longitude,latitude);
//地图初始化，设置中心点坐标和地图级别
map.centerAndZoom(point,15);
map.addOverlay(new BMap.Marker(point)); //在地图上你的位置显示红色点点
}
//失败时
function onError(error){
switch(error.code){
case 1:alert("位置服务被拒绝");break;
case 2:alert("暂时获取不到位置信息");break;
case 3:alert("获取信息超时");break;
case 4:alert("未知错误");break;
}
}
window.onload=getLocation;
</script>
</head>
<body>
<p id="container" style="300px;height: 300px"></p>
</body>
</html>Le code ci-dessus a été testé sur le téléphone portable L'erreur est un peu importante. . Il n'est toujours pas adapté pour un positionnement précis. Il est toujours bon de se positionner en ville
【Recommandations associées】
1 Tutoriel vidéo en ligne gratuit h5<.>
2.Exemple de code d'API HTML5-Géolocalisation
3.html5 navigator.geolocation obtient la casse du code de localisation géographique en fonction du navigateur
4.Guide HTML5 (4) - Explication détaillée de l'utilisation de la géolocalisation
5Explication détaillée de l'exemple de partage de code de géolocalisation Html5 pour obtenir des informations de localisation géographique6.
Explication détaillée de la façon d'utiliser l'API de géolocalisation de HTML5API de géolocalisation HTML5 et algorithme de distance géospatiale Haversine (graphiques et texte)Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
