HTML5怎樣獲取當(dāng)前地理位置并在百度地圖上展示

發(fā)布時間：2020-10-29 10:42:38 來源：億速云閱讀：165 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)HTML5怎樣獲取當(dāng)前地理位置并在百度地圖上展示的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

1.HTML5獲取當(dāng)前地理位置

HTML5 Geolocation API（地理位置應(yīng)用程序接口）可以獲取當(dāng)前地理位置，手機(jī)端使用GPS，電腦則根據(jù)網(wǎng)絡(luò)定位

檢查瀏覽器是否支持HTML5 Geolocation API

<script type="text/javascript">if(navigator.geolocation){
    alert('瀏覽器支持GeoLocation!');
}else{
    alert('瀏覽器不支持GeoLocation!');
}</script>

提供了3個調(diào)用方法

// 獲取用戶當(dāng)前位置void getCurrentPosition(onSuccess, onError, options);// 持續(xù)獲取用戶當(dāng)前位置,showLocation表示回調(diào)方法int watchPosition(showLocation, onError, options);// 取消監(jiān)控, watchId 為watchPosition返回值void clearWatch(watchId);

onSuccess 成功后回調(diào)方法（必選）
onError 失敗回調(diào)方法（可選）
options 其他參數(shù)（可選）

options = {
    enableHighAccuracy, // boolean，是否要求高精度的地理信息
    timeout,            // 最大等待時間，默認(rèn)0毫秒
    maximumAge          // 應(yīng)用程序緩存時間}

2.調(diào)用百度地圖展示

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

    // 調(diào)用HTML5 GeoLocation API獲取地理位置
    function getLocation(){

        document.getElementById('container').innerHTML = '正在搜尋中，請稍候。。。';        var options = {
            enableHighAccuracy:true, 
            maximumAge:1000
        }        if(navigator.geolocation){            //瀏覽器支持geolocation
            navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
        }else{            //瀏覽器不支持geolocation
            alert('瀏覽器不支持GeoLocation!');
        }
    }    // 獲取成功
    function onSuccess(position){

        // 經(jīng)度
        var longitude =position.coords.longitude;        // 緯度
        var latitude = position.coords.latitude;        // 使用百度地圖API創(chuàng)建地圖實例  
        var map =new BMap.Map("container");        // 創(chuàng)建一個坐標(biāo)
        var point =new BMap.Point(longitude,latitude);        // 地圖初始化，設(shè)置中心點坐標(biāo)和地圖級別  
        map.centerAndZoom(point, 16);        // 設(shè)置標(biāo)注的圖標(biāo),可自己定義圖標(biāo)
        var icon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
            offset: new BMap.Size(10, 25),              // 定位圖標(biāo)尺寸  
            imageOffset: new BMap.Size(0, 0 - 11 * 25)  // 設(shè)置圖片偏移  
        }); 

        // 設(shè)置標(biāo)注的經(jīng)緯度
        var marker = new BMap.Marker(new BMap.Point(longitude,latitude),{icon:icon});        // 把標(biāo)注添加到地圖上
        map.addOverlay(marker);        // 設(shè)置點擊事件
        marker.addEventListener("click", function(){
            alert("經(jīng)度:" + longitude + ", 緯度:" + latitude);
        });
    }    // 獲取失敗
    function onError(error){
        switch(error.code){            case 1:
                alert("位置服務(wù)被拒絕");            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>

HTML5怎樣獲取當(dāng)前地理位置并在百度地圖上展示

感謝各位的閱讀！關(guān)于HTML5怎樣獲取當(dāng)前地理位置并在百度地圖上展示就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

HTML5怎樣獲取當(dāng)前地理位置并在百度地圖上展示

1.HTML5獲取當(dāng)前地理位置

2.調(diào)用百度地圖展示

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽