百度地图API js详细介绍

百度地图API

1.1 目标

地理位置
百度地图 API

1.2 重点

地理位置
百度地图 API

1.3 难点

百度地图 API

2 地理位置

地理定位在日常生活中应用比较广泛如互联网打车、在线地图等

h5 增加了获取用户地理位置信息的接口Geolocation 开发者可以通过纬度来获取用户的地理位置信息

另外百度等互联网公司也提供了地理定位的接口

Geolocation 接口

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

鉴于该特性可能侵犯用户的隐私除非用户同意否则用户信息位置时不可用的

对于拥有gps的设备比如iphone 地理定位更加精确

获取当前位置

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

示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>地理位置</title></head><body><p>点击按钮获取您当前位置：</p><button οnclick="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>

[注意] 如果 Chrome 浏览器访问接口出错，请切换至 Edge、FireFox 等浏览器。

返回数据

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

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

异常处理

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 οnclick="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 = '没有获取地理位置信息的权限。';breakcase error.POSITION_UNAVAILABLE:response.innerText = '地理位置获取失败。';break;case error.TIMEOUT:response.innerText = '获取地理位置超时。';break;default:break;}}</script></body>
</html>

百度地图 API

百度地图 JavaScript API

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

百度地图开发步骤

我们将以基础的地图展示和地图标注为例，来学习百度地图 JavaScript API 的使用方法。

[注意] 使用百度开放平台需要开发者认证，请提前提交认证申请。

申请开发密钥

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

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

复制开放平台生成的访问应用的 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 APIfunction 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()); // 添加缩略图控件
}

示例效果如下：

3.3.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); // 打开信息窗口})
}

示例效果如下：

3.3.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); // 驾车路线规划}})
}

百度地图 SDK 辅助定位可兼容 Chrome 浏览器，但定位精度可能欠佳（ HTTP 请求下基于 IP 地址定位）。

百度地图API js详细介绍相关推荐

百度地图api根据详细地址反查坐标
用百度地图api根据详细地址反查坐标 /*** 根据详细地址反查坐标* @param args*/public static void main(String[] args) {String addr ...
html5移动端根据百度地图api获取详细地址
<script type="text/javascript" src="js/BMap.js" ></script><script ...
web前端JavaScript嵌入百度地图API的方法最详细
web前端JavaScript嵌入百度地图API最详细的方法一.申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码. 二.实现首图效果(可以参考开发者指南) 1. 根据Hello Wo ...
python调用百度地图实现导航_python 怎么调用百度地图api
应用编程接口(Application programming interface,API)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或 ...
百度地图api的介绍和使用
1. 什么是百度地图api? 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,我们想使用百度地图的一些内部程序能够为我们提供很大的便利,他里面包括javascriptAPI,Web服 ...
【百度地图API】JS版本的常见问题
1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...
heatmap.js调用百度地图api做热力图
做热力图使用heatmap.js模块然后就是来挑用百度地图api是他展现在百度地图上面一首先你要申请一个百度地图api接口的密钥申请网址申请密钥之后,先登录上自己的账号然后创建应用三就是来取一 ...
Android如何实现地图定位？Android studio+百度地图API+Android6.0系统实现地图显示、地址设置、点击地图定位功能（详细）
文章说明:本文初衷是为了记录毕设学习过程,避免忘记操作流程.该功能是毕业设计的Android软件端的功能之一,本文将从获取百度地图密钥(AK)开始,详细地对地图定位配置和相关代码进行说明,文末将附上实 ...
【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍...
摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. -------------------------------------------------- ...
前端（1）js：百度地图api使用
(1)百度地图API链接 1)获取key http://lbsyun.baidu.com/apiconsole/key 2)查看相关API文档 http://lbsyun.baidu.com/inde ...

百度地图API js详细介绍

百度地图API

1.1 目标

1.2 重点

1.3 难点

2 地理位置

Geolocation 接口

获取当前位置

返回数据

异常处理

百度地图 API

百度地图 JavaScript API

百度地图开发步骤

百度地图API js详细介绍相关推荐

最新文章

热门文章