How to use geolocation in HTML5

This time I will show you how to use HTML5 geolocation, HTML5 geolocationWhat are the precautions used, the following is a practical case, let's take a look.

Geolocation is one of the important features of HTML5. It provides the function of determining the user's location. With this feature, applications based on location information can be developed. Today’s article will introduce to you the basic principles of HTML5 geolocation and the data accuracy of each browser.

Before accessing location information, the browser will ask the user whether to share their location information. Taking the Chrome browser as an example, if you allow the Chrome browser to share your location with the website, the Chrome browser will ask Google Location The service sends local network information to estimate your location. The browser then shares your location with websites that request your location.

HTML5 Geolocation API is very simple to use. The basic calling method is as follows:

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

LocationError is the callback function that fails to obtain location information. You can prompt information according to the error type:

 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 is a callback function that successfully obtains location information. The returned data contains information such as longitude and latitude. Combined with the Google Map API, the current user's location information can be displayed on the map, as follows:

 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); 
}

Passed After testing, the location information obtained by the four browsers Chrome/Firefox/Safari/Opera is exactly the same. It is estimated that they all use the same location service. The data is as follows:

The IE browser is different from the data obtained by the above browsers. The data is as follows:

I believe it After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the use of History mode in H5

Localstorage and sessionstorage usage records

Detailed explanation of the use of indexeddb database

The above is the detailed content of How to use geolocation in HTML5. For more information, please follow other related articles on the PHP Chinese website!