获取当前位置
使用 getCurrentPosition() 方法来获取设备当前位置。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地理位置</title>
</head>
<body>
<p>点击按钮获取您当前位置：</p>
<button onclick="getPosition()">点我</button>
<p>您的位置是：</p>
<p id="response"></p>
<script>
var response = document.getElementById('response');
var options = {
enableHighAccuracy: true, // 启用高精度
timeout: 5000 // 定位超时时间，超时时间内一定返回结果
}
/**
* 获取地理位置
*/
function getPosition() {
// 检测浏览器是否支持地理定位
if (navigator.geolocation) {
// 浏览器支持，获取地理位置
navigator.geolocation.getCurrentPosition(success, error, options);
} else {
// 浏览器不支持，提示用户
response.innerText = '您的浏览器不支持获取地理位置。';
}
}
/**
* 获取成功
* @param {Object} result 返回的结果
*/
function success(result) {
response.innerHTML = `纬度：${result.coords.latitude.toFixed(5)}<br />经度：${result.coords.longitude.toFixed(5)}`;
}
/**
* 获取失败
* @param {Object} error 异常信息
*/
function error(error) {
console.log(error);
}
</script>
</body>
</html>返回数据
若获取地理位置成功，则 getCurrentPosition() 方法将返回数据对象。对象可能包含的属性如下：
| 属性 | 描述 |
|---|---|
| coords.latitude | 以十进制度数表示纬度的双精度值。 |
| coords.longitude | 以十进制度数表示经度的双精度值。 |
| coords.accuracy | 表示纬度和经度属性精度的双精度值，单位为米。 |
| coords.altitude | 表示该位置相对于海平面的高度的双经度值。 如果无法提供数据，则此值可以为空。 |
| coords.altitudeAccuracy | 表示高度属性精度的双精度值，单位为米。 |
| coords.heading | 表示设备运行方向的双精度值。 该值（以度为单位）表示设备离正北方向的距离。0° 表示正北方向，顺时针计算（即东为 90°，西为 270°）。 如果速度为 0，此值为 NaN；如果设备无法提供方向信息，则此值为空。 |
| coords.speed | 表示设备运行速度的双精度值，单位为米/每秒。 |
| timestamp | 获取到位置的时间（时间戳）。 |
2.3.3 异常处理
getCurrentPosition() 方法的第二个参数用于处理错误。它规定获取地理位置失败或用户拒绝定位时运行的函数。
可能返回的错误码：
| 值 | 相关联的常量 | 描述 |
|---|---|---|
| 1 | PERMISSION_DENIED | 地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。 |
| 2 | POSITION_UNAVAILABLE | 地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。 |
| 3 | TIMEOUT | 获取地理位置超时，通过定义 PositionOptions.timeout 来设置获取地理位置的超时时长。 |
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地理位置</title>
</head>
<body>
<p>点击按钮获取您当前位置：</p>
<button onclick="getPosition()">点我</button>
<p>您的位置是：</p>
<p id="response"></p>
<script>
var response = document.getElementById('response');
var options = {
enableHighAccuracy: false, // 启用高精度
timeout: 5000 // 定位超时时间，超时时间内一定返回结果
}
/**
* 获取地理位置
*/
function getPosition() {
// 检测浏览器是否支持地理定位
if (navigator.geolocation) {
// 浏览器支持，获取地理位置
navigator.geolocation.getCurrentPosition(success, error, options);
} else {
// 浏览器不支持，提示用户
response.innerText = '您的浏览器不支持获取地理位置。';
}
}
/**
* 获取成功
* @param {Object} result 返回的结果
*/
function success(result) {
response.innerHTML = `纬度：${result.coords.latitude.toFixed(5)}<br />经度：${result.coords.longitude.toFixed(5)}`;
}
/**
* 获取失败
* @param {Object} error 异常信息
*/
function error(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
response.innerText = '没有获取地理位置信息的权限。';
break
case error.POSITION_UNAVAILABLE:
response.innerText = '地理位置获取失败。';
break;
case error.TIMEOUT:
response.innerText = '获取地理位置超时。';
break;
default:
break;
}
}
</script>
</body>
</html>百度地图 API
3.1 百度地图的作用
百度地图开放平台是面向广大政府、企业、互联网等开发者开放地图服务的平台。
百度地图开放平台拥有七大基础地图服务开放能力：定位、地图、导航、轨迹、路况、路线规划、搜索，并将七大服务能力开放给各行业开发者使用。
百度地图开放平台目前已覆盖近百个行业领域，主要应用场景有：智能物流、智能穿戴、网约车、车用地图、智能景区等。
百度地图 JavaScript API
百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持 PC 端和移动端基于浏览器的地图应用开发，且支持 HTML5 特性的地图开发。
百度地图 JavaScript API 支持 HTTP 和 HTTPS，免费对外开放，可直接使用。接口使用无次数限制。
官方开发文档：地图 JS API | 百度地图API SDK。
百度地图开发步骤
我们将以基础的地图展示和地图标注为例，来学习百度地图 JavaScript API 的使用方法。
[注意] 使用百度开放平台需要开发者认证，请提前提交认证申请。
3.3.1 申请开发密钥
点击链接进入控制台：登录百度帐号。
点击左侧菜单，依次进入：应用管理 → 我的应用，在页面中点击“创建应用”。
复制开放平台生成的访问应用的 AK：
加载 JavaScript API
新建开发页面，参考使用须知异步加载 JavaScript API，并填入你刚才申请到的 AK（密钥）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图</title>
<style>
#map { width: 800px; height: 600px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// 初始化地图
function initialize() {
var map = new BMap.Map('map');
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
}
// 加载 JavaScript API
function loadScript() {
var script = document.createElement("script");
script.src = "https://api.map.baidu.com/api?v=2.0&ak=mETWRRt2iKZmAomVO0WhohX32tPGTUtC&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</body>
</html>修改初始坐标位置
地图在加载时，需要通过脚本设置地图初始化时的中心点坐标位置，例如示例代码 mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11); 中的 121.491, 31.233。如果需要修改该位置，可以通过坐标拾取器获取目标位置的坐标：
示例代码 mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11); 中的 11 是指地图层级，取值范围 4 ~ 19。层级取值越大，地图比例尺越小。
修改后的代码如下：
// 初始化地图
function initialize() {
var map = new BMap.Map('map');
map.centerAndZoom(new BMap.Point(113.839158, 34.729169), 12);
} 添加地图控件
初始化后的地图默认是不能进行缩放的，需要自行添加地图控件。
示例代码：
// 初始化地图
function initialize() {
var map = new BMap.Map('map');
map.centerAndZoom(new BMap.Point(113.839158, 34.729169), 12);
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); // 添加缩略图控件
}添加标注
可以使用 map.addOverlay 方法向地图添加标注，并且向地图中添加信息窗口。
示例代码：
// 初始化地图
function initialize() {
var point = new BMap.Point(113.839158, 34.729169);
var map = new BMap.Map('map');
map.centerAndZoom(point, 12);
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); // 添加缩略图控件
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var opts = {
width: 240,
height: 80,
title: `厚溥IT`
}
var infoWindow = new BMap.InfoWindow('河南省郑州市经济技术开发区航海东路中兴新业港51号楼', opts); // 创建信息窗口对象
marker.addEventListener('click', function() {
map.openInfoWindow(infoWindow, point); // 打开信息窗口
})
}出行路线规划
百度地图 JavaScript API 提供了驾车、公交、步行和骑行四种出行方式的路线规划功能。
我们将以驾车为例，演示获取用户当前定位，以及到厚溥 IT 的驾车路线规划：
// 初始化地图
function initialize() {
var point = new BMap.Point(113.839158, 34.729169); // 目标地理位置
var map = new BMap.Map('map');
map.centerAndZoom(point, 12);
map.enableScrollWheelZoom(true); // 启用滚轮缩放
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); // 添加缩略图控件
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var opts = {
width: 240,
height: 80,
title: `厚溥IT`
}
var infoWindow = new BMap.InfoWindow('河南省郑州市经济技术开发区航海东路中兴新业港51号楼', opts); // 创建信息窗口对象
marker.addEventListener('click', function() {
map.openInfoWindow(infoWindow, point); // 打开信息窗口
})
var geolocation = new BMap.Geolocation();
geolocation.enableSDKLocation(); // 开启SDK辅助定位
geolocation.getCurrentPosition(function(result) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var current = result.point; // 当前地理位置
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
driving.search(current, point); // 驾车路线规划
}
})
}百度地图 SDK 辅助定位可兼容 Chrome 浏览器，但定位精度可能欠佳（ HTTP 请求下基于 IP 地址定位）。
885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
