推广 热搜: 行业  机械  设备    经纪  教师  系统  参数    蒸汽 

如何在项目中整合百度API

   日期:2024-11-10     移动:http://fhzcwj.xhstdz.com/mobile/quote/65120.html
  • 百度地图 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 文档

安装

 

初始化

 

使用

本文地址:http://fhzcwj.xhstdz.com/quote/65120.html    物流园资讯网 http://fhzcwj.xhstdz.com/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


0相关评论
相关最新动态
推荐最新动态
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号