相关动态
如何在项目中整合百度API
2024-11-10 18:41
  • 百度地图 Javascript API 是一套由 Javascript 语言编写的应用程序接口
  • 可帮助您在网站中,构建功能丰富交互性强的地图应用
  • 支持PC端和移动端,基于浏览器的地图应用开发,且支持HTML5特性的地图开发

🚀 官网传送门

如何在项目中整合百度API

百度地图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 文档

安装

 

初始化

 

使用


    以上就是本篇文章【如何在项目中整合百度API】的全部内容了,欢迎阅览 ! 文章地址:http://mip.xhstdz.com/quote/65120.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 物流园资讯移动站 http://mip.xhstdz.com/mobile/ , 查看更多   
发表评论
0评