지리적 위치 정보를 얻기 위한 HTML5 Geolocation 샘플 코드 공유에 대한 자세한 설명-H5 튜토리얼-php.cn

지리적 위치 정보를 얻기 위한 HTML5 Geolocation 샘플 코드 공유에 대한 자세한 설명

黄舟

풀어 주다： 2017-03-18 15:59:20

원래의

1919명이 탐색했습니다.

이 글은 지리적 위치 정보를 얻는 Html5 위치정보 예제를 주로 소개합니다. 관심 있는 학생들이 배울 수 있는 참고할만한 가치가 있습니다.

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

Html5는 getCurrentPosition 메소드를 사용하여 Geolocation API를 통해 지리적 위치 정보를 얻습니다. 이 메소드에는 지리적 위치 정보가 성공적으로 실행될 때 실행되는 콜백 함수가 있습니다. 실패 시 실행되는 콜백 함수 및 선택적 속성 구성 항목입니다.

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

으아악

위 내용은 지리적 위치 정보를 얻기 위한 HTML5 Geolocation 샘플 코드 공유에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!