How to use H5 geolocation

This time I will show you how to use H5 geolocation, how to use H5 geolocation? What are the precautions for H5 geo-positioning? The following is a practical case, let’s take a look at it together.

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 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

In general, in PC browsers The location accuracy obtained by the geographical location function in HTML5 is not high enough. If you use this HTML5 feature to make a cityweather forecast, it is more than enough, but if you are making a map application, the error is still too large. However, if it is an HTML5 application on a mobile device, you can set the enableHighAcuracy parameter to true and call the device's GPS positioning to obtain high-precision geographical location information.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to implement h5 mobile terminal adaptation

How to make H5 responsive web design

How to communicate across domains in html5

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