明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML5取得當(dāng)前地理位置并在百度地圖上展示的案例

發(fā)表時間：2023-09-07 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]1.HTML5獲取當(dāng)前地理位置HTML5 Geolocation API（地理位置應(yīng)用程序接口）可以獲取當(dāng)前地理位置，手機(jī)端使用GPS，電腦則根據(jù)網(wǎng)絡(luò)定位檢查瀏覽器是否支持HTML5 Geolocation API<script type="text/javascript"...

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)內(nèi)容請關(guān)注php中文網(wǎng)。

相關(guān)推薦：

通過php 中的自增id來創(chuàng)建唯一編號類

關(guān)于php 優(yōu)化頁面輸出，兼容搜索引擎機(jī)器人訪問的實例的講解

通過php 調(diào)用ffmpeg來獲取視頻信息

以上就是HTML5獲取當(dāng)前地理位置并在百度地圖上展示的實例的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。