地理的位置情報を取得するための Html5 Geolocation サンプルコード共有の詳細な説明-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

地理的位置情報を取得するための Html5 Geolocation サンプルコード共有の詳細な説明

黄舟

Mar 18, 2017 pm 03:59 PM

この記事では、地理的位置情報を取得するための Html5Geolocation の例を主に紹介します。興味のある学生はそれについて学ぶことができます。

Html5 は、ブラウザーを通じてユーザーの現在位置を取得できる地理的位置情報の API を提供します。この機能に基づいて、位置ベースのサービスアプリケーションを開発できます。地理的位置情報を取得する前に、ブラウザはまずユーザーに位置情報を共有するかどうかを尋ね、ユーザーが同意した場合にのみ使用できます。

Html5 は、getCurrentPosition メソッドを使用して Geolocation API を通じて地理的位置情報を取得します。このメソッドには 3 つのパラメーターがあります。地理的位置情報の取得が成功したときに実行されるコールバック関数、失敗したときに実行されるコールバック関数です。およびオプションの属性構成項目。

次のデモでは、Geolocation を通じて地理的位置情報を取得し、(Baidu Map API を呼び出して) Baidu Map 上に現在位置を表示する方法を示します。実験の結果、その場所は大学街の環東四路の入り口にあることがわかりました。私の場所（華公学生寮）からの偏差はまだ少し大きく、約200〜300メートルに達します。

地理的位置情報を取得するための Html5 Geolocation サンプルコード共有の詳細な説明

コードは次のとおりです (convertor.js は百度地図が提供する座標変換ファイルです):

<!DOCTYPE html>
<html>
    <head>
        <title>H5地理位置Demo</title>
        <script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript">
        </script>
        <script type="text/javascript" src="convertor.js">
        </script>
    </head>
    <body>
        <p id="map" style="width:600px; height:400px">
        </p>
    </body>
    <script type="text/javascript">
        if (window.navigator.geolocation) {
            var options = {
                enableHighAccuracy: true,
            };
            window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);
        } else {
            alert("浏览器不支持html5来获取地理位置信息");
        }
        
        function handleSuccess(position){
            // 获取到当前位置经纬度  本例中是chrome浏览器取到的是google地图中的经纬度
            var lng = position.coords.longitude;
            var lat = position.coords.latitude;
            // 调用百度地图api显示
            var map = new BMap.Map("map");
            var ggPoint = new BMap.Point(lng, lat);
            // 将google地图中的经纬度转化为百度地图的经纬度
            BMap.Convertor.translate(ggPoint, 2, function(point){
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                map.centerAndZoom(point, 15);
            });
        }
        
        function handleError(error){
        
        }
    </script>
</html>

ログイン後にコピー

convertor.js ファイル:

(function() { // 闭包
    function load_script(xyUrl, callback) {
        var head = document.getElementsByTagName(&#39;head&#39;)[0];
        var script = document.createElement(&#39;script&#39;);
        script.type = &#39;text/javascript&#39;;
        script.src = xyUrl;
        // 借鉴了jQuery的script跨域方法
        script.onload = script.onreadystatechange = function() {
            if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
                callback && callback();
                // Handle memory leak in IE
                script.onload = script.onreadystatechange = null;
                if (head && script.parentNode) {
                    head.removeChild(script);
                }
            }
        };
        // Use insertBefore instead of appendChild to circumvent an IE6 bug.
        head.insertBefore(script, head.firstChild);
    }
    function translate(point, type, callback) {
        var callbackName = &#39;cbk_&#39; + Math.round(Math.random() * 10000); // 随机函数名
        var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type
                + "&to=4&x=" + point.lng + "&y=" + point.lat
                + "&callback=BMap.Convertor." + callbackName;
        // 动态创建script标签
        load_script(xyUrl);
        BMap.Convertor[callbackName] = function(xyResult) {
            delete BMap.Convertor[callbackName]; // 调用完需要删除改函数
            var point = new BMap.Point(xyResult.x, xyResult.y);
            callback && callback(point);
        }
    }

    window.BMap = window.BMap || {};
    BMap.Convertor = {};
    BMap.Convertor.translate = translate;
})();

ログイン後にコピー

以上が地理的位置情報を取得するための Html5 Geolocation サンプルコード共有の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。