집 > 기사 > 웹 프론트엔드 > 지리적 위치를 사용하여 지리적 위치 정보 얻기

지리적 위치를 사용하여 지리적 위치 정보 얻기

php中世界最好的语言원래의: 2018-03-26 11:46:231747검색

이번에는 지리적 위치 정보를 얻기 위해 Geolocation을 사용하는 방법에 대한 몇 가지 노트를 가져오겠습니다. 다음은 몇 가지 실제 사례입니다. 함께 살펴보겠습니다.

Html5는 브라우저를 통해 사용자의 현재 위치를 얻을 수 있도록 지리적 위치 정보에 대한 API를 제공합니다. 이 기능을 기반으로 위치 기반 서비스 애플리케이션을 개발할 수 있습니다. 지리적 위치 정보를 얻기 전에 브라우저는 먼저 사용자에게 위치 정보를 공유할 의향이 있는지 묻고 사용자가 동의한 후에만 사용할 수 있습니다.

Html5는 getCurrentPosition 메소드를 사용하여 Geolocation API를 통해 지리적 위치 정보를 얻습니다. 이 메소드에는 지리적 위치 정보를 성공적으로 얻었을 때 실행되는 콜백 함수와 같은 세 가지 매개변수가 있습니다. 콜백 함수 및 선택적 속성 구성 항목이 실패합니다.

다음 데모에서는 Geolocation을 통해 지리적 위치 정보를 얻고 Baidu 지도에 현재 위치를 표시하는 방법을 보여줍니다(Baidu Map API 호출). 실험 결과 위치는 대학가의 환동 4로 입구에 있는 것으로 나타났습니다. 제가 있는 위치(화공 학생 기숙사)와의 편차는 여전히 약 200~300미터에 이릅니다.

코드는 다음과 같습니다. (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('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        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 = 'cbk_' + 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;
})();

본 글의 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. , 더 흥미로운 정보를 보려면 오세요. PHP 중국어 웹사이트의 다른 관련 기사도 주목하세요!