So verwenden Sie Geolokalisierung in HTML5

Dieses Mal zeige ich Ihnen, wie Sie die HTML5-Geopositionierung verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung der HTML5-Geopositionierung?

Geolocation ist eine der wichtigen Funktionen von HTML5. Es bietet die Funktion, den Standort des Benutzers zu bestimmen. Mit dieser Funktion können Anwendungen entwickelt werden, die auf Standortinformationen basieren. Der heutige Artikel stellt Ihnen die Grundprinzipien der HTML5-Geolokalisierung und die Datengenauigkeit jedes Browsers vor.

Bevor der Browser auf Standortinformationen zugreift, fragt er den Benutzer, ob er seine Standortinformationen teilen möchte. Wenn Sie beispielsweise dem Chrome-Browser erlauben, Ihren Standort mit der Website zu teilen, wird der Chrome-Browser dies tun Google-Standort senden Der Dienst sendet lokale Netzwerkinformationen, um Ihren Standort zu schätzen. Der Browser teilt dann Ihren Standort mit Websites, die Ihren Standort anfordern.

Die HTML5-Geolocation-API ist sehr einfach zu verwenden. Die grundlegende Aufrufmethode lautet wie folgt:

 if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{
        // 指示浏览器获取高精度的位置，默认为false
        enableHighAccuracy: true,
        // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
        timeout: 5000,
        // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
        maximumAge: 3000
    });
}else{
    alert("Your browser does not support Geolocation!");
}

locationError ist die Rückruffunktion , die keine Standortinformationen abrufen kann. Es kann Informationen entsprechend dem Fehlertyp abfragen:

 locationError: function(error){
    switch(error.code) {
        case error.TIMEOUT:
            showError("A timeout occured! Please try again!");
            break;
        case error.POSITION_UNAVAILABLE:
            showError('We can\'t detect your location. Sorry!');
            break;
        case error.PERMISSION_DENIED:
            showError('Please allow geolocation access for this to work.');
            break;
        case error.UNKNOWN_ERROR:
            showError('An unknown error occured!');
            break;
    }
}

LocationSuccess ist eine Rückruffunktion, die erfolgreich Standortinformationen abruft. Die zurückgegebenen Daten enthalten Informationen wie Längen- und Breitengrad, kombiniert mit der Google Map-API Die Standortinformationen des Benutzers können wie folgt auf der Karte angezeigt werden:

 locationSuccess: function(position){
    var coords = position.coords;    
    var latlng = new google.maps.LatLng(
        // 维度
        coords.latitude,
        // 精度
        coords.longitude
    );  
    var myOptions = {  
        // 地图放大倍数  
        zoom: 12,  
        // 地图中心设为指定坐标点  
        center: latlng,  
        // 地图类型  
        mapTypeId: google.maps.MapTypeId.ROADMAP  
    };  
    // 创建地图并输出到页面  
    var myMap = new google.maps.Map(  
        document.getElementById("map"),myOptions  
    );  
    // 创建标记  
    var marker = new google.maps.Marker({  
        // 标注指定的经纬度坐标点  
        position: latlng,  
        // 指定用于标注的地图  
        map: myMap
    });
    //创建标注窗口  
    var infowindow = new google.maps.InfoWindow({  
        content:"您在这里<br/>纬度："+  
            coords.latitude+  
            "<br/>经度："+coords.longitude  
    });  
    //打开标注窗口  
    infowindow.open(myMap,marker); 
}

Nach dem Test sind die von den vier Browsern Chrome/Firefox/Safari/Opera erhaltenen Standortinformationen genau gleich Alle verwenden denselben Standortdienst lautet wie folgt:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!
Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung des Verlaufsmodus in H5

Lokale Speicher- und Sitzungsspeicher-Nutzungsaufzeichnungen

Detaillierte Erläuterung der Verwendung der indexeddb-Datenbank

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Geolokalisierung in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!