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

집

웹 프론트엔드

H5 튜토리얼

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

黄舟

Mar 18, 2017 pm 03:59 PM

이 글은 지리적 위치 정보를 얻는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.