현재 지리적 위치를 가져와 Baidu 지도에 표시하는 HTML5 예-HTML 튜토리얼-php.cn

1.HTML5는 현재 지리적 위치를 가져옵니다

2. Baidu 지도 표시 호출

집

웹 프론트엔드

HTML 튜토리얼

현재 지리적 위치를 가져와 Baidu 지도에 표시하는 HTML5 예

jacklove

Jun 20, 2018 pm 05:25 PM

geo html5

1.HTML5는 현재 지리적 위치를 가져옵니다

HTML5 Geolocation API(Geolocation Application 프로그래밍 인터페이스)는 현재 지리적 위치를 가져올 수 있습니다. 휴대폰은 GPS를 사용하고 컴퓨터는 네트워크를 기반으로 위치를 찾습니다

브라우저는 HTML5 Geolocation API를 지원합니다

<script type="text/javascript">if(navigator.geolocation){
    alert(&#39;浏览器支持GeoLocation!&#39;);
}else{
    alert(&#39;浏览器不支持GeoLocation!&#39;);
}</script>

로그인 후 복사

3가지 호출 방법 제공

// 获取用户当前位置void getCurrentPosition(onSuccess, onError, options);// 持续获取用户当前位置,showLocation表示回调方法int watchPosition(showLocation, onError, options);// 取消监控, watchId 为watchPosition返回值void clearWatch(watchId);

로그인 후 복사

onSuccess 성공 후 콜백 방법(필수)
onError 실패 시 콜백 방법(선택 사항)
options 기타 매개변수(선택 사항)

options = {
    enableHighAccuracy, // boolean，是否要求高精度的地理信息
    timeout,            // 最大等待时间，默认0毫秒
    maximumAge          // 应用程序缓存时间}

로그인 후 복사

2. Baidu 지도 표시 호출

<!DOCTYPE html><html><head><meta charset="utf-8"/>  <title>基于HTML5查找地理位置并调用百度API展示</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>  <script type="text/javascript">

    // 调用HTML5 GeoLocation API获取地理位置
    function getLocation(){

        document.getElementById(&#39;container&#39;).innerHTML = &#39;正在搜寻中，请稍候。。。&#39;;        var options = {
            enableHighAccuracy:true, 
            maximumAge:1000
        }        if(navigator.geolocation){            //浏览器支持geolocation
            navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
        }else{            //浏览器不支持geolocation
            alert(&#39;浏览器不支持GeoLocation!&#39;);
        }
    }    // 获取成功
    function onSuccess(position){

        // 经度
        var longitude =position.coords.longitude;        // 纬度
        var latitude = position.coords.latitude;        // 使用百度地图API创建地图实例  
        var map =new BMap.Map("container");        // 创建一个坐标
        var point =new BMap.Point(longitude,latitude);        // 地图初始化，设置中心点坐标和地图级别  
        map.centerAndZoom(point, 16);        // 设置标注的图标,可自己定义图标
        var icon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
            offset: new BMap.Size(10, 25),              // 定位图标尺寸  
            imageOffset: new BMap.Size(0, 0 - 11 * 25)  // 设置图片偏移  
        }); 

        // 设置标注的经纬度
        var marker = new BMap.Marker(new BMap.Point(longitude,latitude),{icon:icon});        // 把标注添加到地图上
        map.addOverlay(marker);        // 设置点击事件
        marker.addEventListener("click", function(){
            alert("经度:" + longitude + ", 纬度:" + latitude);
        });
    }    // 获取失败
    function onError(error){
        switch(error.code){            case 1:
                alert("位置服务被拒绝");            break;            case 2:
                alert("暂时获取不到位置信息");            break;            case 3:
                alert("获取信息超时");            break;            case 4:
                alert("未知错误");            break;
        }
    }

    window.onload = getLocation;</script></head><body>
   <p id="container" style="width:640px;height:640px"></p></body></html>

로그인 후 복사

현재 지리적 위치를 가져와 Baidu 지도에 표시하는 HTML5 예