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

🚀 官网传送门

百度地图Javascript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。在使用前，需要先申请密钥（ak）才可以使用。

🚀申请密钥传送门

应用管理 -- 我的应用 -- 创建应用

创建成功之后，如上图所示。

应用名称 -- 百度地图，访问应用（AK） 就是需要的密钥。

🚀百度地图，示例中心，传送门

创建地图

看一下官方demo就知道该怎么用了。

在页面中，使用 script 标签引入

获取经纬度

🚀百度地图，拾取坐标系统

搜索栏，输入地理位置，选择结果，在右上角复制当前坐标点，即可获取经纬度。

创建Map实例

html 部分

js 部分

页面显示效果如下：

两个坐标点之间的距离

查询地点信息

举例说明 -- 橘子洲头

查询出橘子洲头相关的一地址信息，经纬度等等。

点击下方的详细信息，可查看完整的返回结果。

举例说明 -- 茶颜悦色

可以查询到长沙的茶颜悦色：地址信息，经纬度等等信息。

点击下方的详细信息，可查看完整的返回结果。

Vue项目中整合百度API获取地理位置的方法

新建 文件

通过百度API服务类Geolocation 来实现

Geolocation

返回用户当前的位置。此方法利用浏览器的geolocation接口获取用户当前位置，不支持的浏览器将无法获取。

getCurrentPosition()

返回用户当前位置。

getStatus()

返回状态码，当定位成功后，状态码为：BMAP_STATUS_SUCCESS

组件中使用

data定义的参数

点击下方详细信息，查看获取地理位置的方法 getLocation 完整代码。

vue-baidu-map 百度地图官方vue组件

github地址 vue-baidu-map 文档

安装

初始化

使用