【前端】【H5 API】地理定位（获取经纬度）

H5 API 地理定位地理定位在日常生活中应用比较广泛，例如，互联网打车、在线地图等。在HTML 5的规范中，增加了获取用户地理位置信息的接口Geolocation，开发者可以通过经纬度来获取用户的地理位置信息，Geolocation接口的特点如下。Geolocation接口封装了获取位置信息的技术细节。开发者不需要关心信息的来源，只需关注如何使用即可，这极大地简化了开发的难度。目前...

萌狼蓝天

15962人浏览 · 2022-03-15 16:45:00

萌狼蓝天 · 2022-03-15 16:45:00 发布

H5 API 地理定位

地理定位在日常生活中应用比较广泛，例如，互联网打车、在线地图等。在HTML 5的规范中，增加了获取用户地理位置信息的接口Geolocation，开发者可以通过经纬度来获取用户的地理位置信息，Geolocation接口的特点如下。

Geolocation接口封装了获取位置信息的技术细节。
开发者不需要关心信息的来源，只需关注如何使用即可，这极大地简化了开发的难度。
目前，该接口已经得到了大部分浏览器的支持，如Firefox、IE 9、Opera、Safari和Chrome等。
对于拥有GPS的设备，定位会更加准确，如iPhone和Android手机等。

navigator.geolocation对象提供了getCurrentPosition()方法来获取当前地理位置。

其中，navigator是浏览器的内置对象。

当getCurrentPosition()方法被调用时，会发起一个异步请求，浏览器会去调用底层的硬件来更新当前的位置信息。

position对象中的coords属性包含的信息如表所示。

属性名	描述
latitude	十进制表示的纬度坐标
longitude	十进制表示的经度坐标
accuracy	当前经纬度信息的精度(单位米)
altitude	海拔高度(单位米)
altitudeAccuracy	当前海拔高度的精度
heading	当前设备的朝向(以弧度为单位)，从正北开始计算

获取当前位置

<!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>Document</title>
</head>

<body>
    <p id="demo">获得您的坐标：</p>
    <button onclick="getLocation()">试一下</button>
    <script>
        var x = document.getElementById('demo');

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                x.innerHTML = '当前浏览器不支持地理定位';
            }
        }
        // 获取定位成功，显示位置信息
        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 = '用户拒绝地理定位请求';
                    break;
            }
        }
    </script>
</body>

</html>

为了查看获取定位后的效果，我们可以手动设置一个虚拟的位置，单击开发者工具右上角的“︙”按钮，选择“More tools”-“Sensors”(传感器)，然后在Geolocation对应的下拉菜单中选择“Shanghai”

调用百度全景地图

百度地图开放平台 | 百度地图API SDK | 地图开发 (https://lbsyun.baidu.com/)

<!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?v=2.0&ak=您的密钥"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	  
	map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>