HTML5获得当今自然地理部位并在百度搜索●▂●地

日期:2021-01-20 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

1.HTML5获得当今自然地理部位

HTML5 Geolocation API(自然地理部位运用程序插口)能够获得当今自然地理部位,手机上端应用GPS,电脑上则依据互联网精准定位

查验访问器是不是适用HTML5 Geolocation API

<script type="text/javascript">
if(navigator.geolocation){
    alert('访问器适用GeoLocation!');
}else{
    alert('访问器不兼容GeoLocation!');
}
</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.启用百度搜索地形图展现

<!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('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){

        // 经度
        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>
   <div id="container" style="width:640px;height:640px"></div>
</body>
</html>

到此这篇有关HTML5获得当今自然地理部位并在百度搜索地形图上展现的案例的文章内容就详细介绍到这了,大量有关HTML5获得自然地理部位并展现內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!