H5C3进阶——地理定位接口

最新推荐文章于 2023-07-14 10:29:33 发布

Feliks.

最新推荐文章于 2023-07-14 10:29:33 发布

阅读量267

点赞数

分类专栏：前端基础进阶文章标签： javascript html5 前端

本文链接：https://blog.csdn.net/qq_47770336/article/details/122721000

版权

前端基础进阶专栏收录该内容

7 篇文章 0 订阅

订阅专栏

地理定位接口

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地理定位接口</title>
</head>

<body>
    <p id="demo">点击这个按钮，获得您的坐标：</p>
    <button onclick="getLocation()">试一下</button>

    <script>
        var x=document.getElementById("demo");
        function getLocation()
        {
            //能力测试
            if (navigator.geolocation)
                {                                           //3个参数
                                                            //1.获取地理信息成功之后回调
                                                            //2.获取地理信息失败之后回调
                                                            //3.调整获取当前地理信息的方式
                    // navigator.geolocation.getCurrentPosition(success,error,option);//option:设置获取数据的方式

                    // anableHighAccuracy:true/false: 是否使用高精度
                    //timeout: 设置超时时间，单位ms
                    //maximumAge: 设置浏览器重新获取地理信息的时间间隔，单位ms
                    navigator.geolocation.getCurrentPosition(showPosition,showError,{
                        // enableHighAccuracy:true,
                        // timeout:3000
                    });
                }
            else{x.innerHTML="Geolocation is not supported by this browser.";}
        }
        //成功获取定位之后的回调
        //如果成功，会将获取到的地理信息传递给成功之后的回调
        //position.coords.latitude 纬度
        //position.coords.longitude 经度
        //position.coords.accuracy 精度
        //position.coords.altitude 海拔高度
        function showPosition(position)
        {
            x.innerHTML="Latitude: " + position.coords.latitude +
            "<br />Longitude: " + position.coords.longitude;
        }

        //失败后回调
        function showError(error){
            switch(error.code)
                {
                case error.PERMISSION_DENIED:
                    x.innerHTML="User denied the request for Geolocation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML="Location information is unavailable."
                    break;
                case error.TIMEOUT:
                    x.innerHTML="The request to get user location timed out."
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML="An unknown error occurred."
                    break;
                }
            }
    </script>
</body>
</html>

使用第三方API实现地理定位(百度地图)

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=自己申请密钥"></script>
	<title>设置地图3D视角</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	var map = new BMapGL.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 19);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	map.setHeading(64.5);
	map.setTilt(73);
</script>

Feliks.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5C3进阶——地理定位接口

地理定位接口demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
复制链接

扫一扫