地理位置和百度地图

一地理位置

1.1Geolocation 接口

一个用来获取设备地理位置的可编程的对象，它可以让 Web 内容访问到设备的地理位置（经纬度），这将允许 Web 应用基于用户的地理位置提供定制的信息。

1.2使用地理位置

使用 getCurrentPosition() 方法来获取设备当前位置。

1.3返回数据

若获取地理位置成功，则 getCurrentPosition() 方法将返回数据对象。对象可能包含的属性如下：

属性	描述
coords.latitude	以十进制度数表示纬度的双精度值。
coords.longitude	以十进制度数表示经度的双精度值。
coords.accuracy	表示纬度和经度属性精度的双精度值，单位为米。
coords.altitude	表示该位置相对于海平面的高度的双经度值。 如果无法提供数据，则此值可以为空。
coords.altitudeAccuracy	表示高度属性精度的双精度值，单位为米。
coords.heading	表示设备运行方向的双精度值。 该值（以度为单位）表示设备离正北方向的距离。0° 表示正北方向，顺时针计算（即东为 90°，西为 270°）。 如果速度为 0，此值为 NaN；如果设备无法提供方向信息，则此值为空。
coords.speed	表示设备运行速度的双精度值，单位为米/每秒。
timestamp	获取到位置的时间（时间戳）。

 1.4异常处理

getCurrentPosition() 方法的第二个参数用于处理错误。它规定获取地理位置失败或用户拒绝定位时运行的函数。

可能返回的错误码：

值	相关联的常量	描述
1	PERMISSION_DENIED	地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。
2	POSITION_UNAVAILABLE	地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。
3	TIMEOUT	获取地理位置超时，通过定义 PositionOptions.timeout 来设置获取地理位置的超时时长。

二，百度地图API

2.1百度地图

百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持 PC 端和移动端基于浏览器的地图应用开发，且支持 HTML5 特性的地图开发。

百度地图 JavaScript API 支持 HTTP 和 HTTPS，免费对外开放，可直接使用。接口使用无次数限制。

官方开发文档：地图 JS API | 百度地图API SDK。

2.2申请开发密钥

点击链接进入控制台：登录百度帐号。

点击左侧菜单，依次进入：应用管理 → 我的应用，在页面中点击“创建应用”。

2.3修改初始坐标位置

地图在加载时，需要通过脚本设置地图初始化时的中心点坐标位置，例如示例代码 mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11); 中的 121.491, 31.233。如果需要修改该位置，可以通过坐标拾取器获取目标位置的坐标：

2.4添加地图控件

初始化后的地图默认是不能进行缩放的，需要自行添加地图控件。

示例代码：

// 初始化地图
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()); // 添加缩略图控件
}

2.5添加标注

可以使用 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); // 打开信息窗口
    })
}

2.6出行路线规划

百度地图 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); // 驾车路线规划
        }
    })
}