uniapp 微信小程序端使用百度地图API

已于 2024-06-27 09:58:24 修改
阅读量3k 收藏 14
点赞数 4
分类专栏： uni-app 文章标签： uni-app
于 2024-06-26 20:47:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39998026/article/details/139998110
版权

 1、登录百度地图开放平台 https://lbsyun.baidu.com/（没有账号则先去创建一个百度账号）

2、进入百度地图开放平台控制台（导航栏“控制台”），点击“应用管理”-“我的应用”

3、选择“创建应用”，应用模块选择“微信小程序”。创建成功后你就得到一个百度地图AK。

4、下载百度地图微信小程序JavaScript API

下载地址：微信小程序JavaScript API - 配置环境 | 百度地图API SDK

下载百度地图微信小程序JavaScript API，解压后的文件中有 bm

最低0.47元/天 解锁文章
uniapp 微信小程序地图，在高德app、腾讯app、百度app、苹果地图app 中打开
Shimeng_1989的博客
07-21 7871
uniapp 微信小程序地图，在高德app、腾讯app、百度app、苹果地图app 中打开
uniapp 微信小程序开发使用高德地图、腾讯地图
u013302168的博客
12-30 2134
这个key 第3步骤，配置到项目中locationGps.js。
小程序百度地图api-demo
08-10
小程序版高德地图完美运行demo，1: 需要设置请求合法域名，才能正常使用百度小程序 JavaScript API。 登录微信公众平台－> "设置" －> "开发设置" －> "request 合法域名" －>添加 api.map.baidu.com －> 点击"保存并提交"，2修改app.js内的ak为你设置的，完美运行
uniapp中使用百度地图(初学者保姆式教学，持续更新)
qq_51649346的博客
03-25 9246
基本使用讲解//创建地图实例，与id匹配 var point = new BMapGL . Point(116.404 , 39.915);//创建中心点的坐标(经纬度)，百度地图在坐标上有个转换，百度对外接口用的是BD09坐标系，这个下一个博客会细说 map . centerAndZoom(point , 15);// 初始化地图，设置中心点坐标和地图级别 map . setHeading(64.5);//设置地图旋转角度 map . setTilt(73);//设置地图的倾斜角度部分参数。
uniapp+微信小程序+地图+传入多个标记点显示+点击打开内置地图导航+完整代码
最新发布
apple_70049717的博客
03-06 565
整体说一下就是map直接组件就显示地图，marker就是标记点传进来显示，这个就是打开手机内置地图然后选择你的地图就能正常导航过去。
在uniapp微信小程序中使用百度地图
qq_45281478的博客
01-16 2368
html代码：复制百度地图官网的。请求定位，当不传参数的时候，会默认是请求当前位置。**第一步：**申请秘钥AK，这个自行百度申请。**第三步：**在项目中导入js API ,**第二步：**引入百度地图js模块。下载js文件后，解压，并放到项目中。js首先需要导入js api。根据经纬度，请求具体地址。
uniapp 小程序中百度地图的使用,通过地址获取经纬度，导航至该地址 --详细 2024
weixin_71045874的博客
09-03 2302
下载百度地图微信小程序JavaScript API，解压后的文件中有 bmap-wx.js 文件(压缩版 bmap-wx.min.js )，将其拷贝到static/js目录下。第一步：登录百度地图开放平台 申请百度ak ,https://lbsyun.baidu.com/（没有账号则先去创建一个百度账号）场景：接口返回一个地址如（北京市天安门），点击导航，调用地图，导航至该地点。“控制台”），点击“应用管理”-“我的应用”，创建应用。第二步，进入百度地图开放平台控制台（
使用uniapp开发小程序场景：在百度地图上调用接口返回的设备相关信息并展示
On the way
12-05 892
小程序
uniapp 实现微信小程序使用百度(高德)地图导航
qq_56149957的博客
08-14 3103
注意：手机上要有百度地图或者高德地图软件。使用uniapp提供的api。
uniapp 微信小程序小票打印机打印教程（超详细讲解） 完整代码，下载后可直接使用
07-24
在本文中，我们将深入探讨如何使用uniapp框架和微信小程序来实现小票打印机的打印功能。这个教程将提供一个详尽的步骤指南，确保你能够理解并应用到实际项目中。我们将涵盖以下知识点： 1. **uniapp简介**：uniapp...
uniapp 微信小程序 时间段选择组件
07-24
总之，`uniapp`微信小程序的时间段选择组件涉及到了`uni-app`的基础知识，如组件化开发、数据绑定、事件处理等，同时也涵盖了微信小程序的特定API和自定义样式设计。通过学习和实践，开发者可以构建出符合业务需求、...
微信小程序结合百度地图开发
06-18
针对微信小程序和百度地图的结合，便于使用微信小程序的时候定位到当前的位置，还有针对尝试微信小程序和地图融合时候的坑，请多多探讨
基于uniapp微信小程序我的钱包页面
03-26
【基于uniapp微信小程序我的钱包页面】开发详解 在移动应用开发领域，微信小程序因其轻量化、便捷的特性，已经成为开发者的重要选择。而uniapp作为一款跨平台开发框架，能够帮助开发者快速构建H5、微信小程序、...
uniapp使用百度地图（一）
一切都不太晚
12-06 8033
玩转百度地图，轨迹，定位，获取经纬度，窗口弹出，等等，应有尽有
uniapp简单使用百度地图
呆子小木心的博客
02-13 4226
uniapp简单使用百度地图
如何在uni-app 中使用百度地图，高精度定位
MrjieQ的博客
12-26 3809
uni-app简单方法让你学会如何在自己的项目中使用百度地图,还能定位自己所在位置
uniapp H5端 使用百度地图API
weixin_52634104的博客
10-21 3601
由于uniappH5端自带的腾讯地图点击不返回坐标，也获取不到具体位置，由于项目的需求和uniapp自带的组件不符合，于是使用了百度地图。
【App端】uni-app使用百度地图api和echarts省市地图下钻
aDiaoYa_的博客
08-28 3628
近期的app项目中想加一个功能，展示全国各地的某一数据统计情况，想来想去，用echarts做地图数据可视化直观且美观。于是就去研究了如何使用，其实在移动端使用echarts地图踩的bug挺多的，总结如下。
uniapp（微信小程序）使用百度地图逆地址解析
qiuzongzhen的博客
09-04 633
项目中新建libs文件夹，将解压后的bmap-wx.js文件放进来。申请账号，应用类型选择微信小程序，然后下载。
uniapp 微信小程序使用百度地图
01-08
### 集成百度地图API于UniApp微信小程序 #### 准备工作 为了在UniApp开发的微信小程序中集成百度地图API，需先准备好必要的资源。创建新目录`libs`并将下载得到的百度地图微信小程序JavaScript API中的`bmap-wx.js`文件复制至此处[^3]。 #### 初始化百度地图对象 在页面初始化阶段引入百度地图插件，并设置好应用密钥AK（Access Key），这是访问百度LBS开放平台服务所必需的身份验证凭证： ```javascript import BMapWX from '@/libs/bmap-wx.js'; const bmap = new BMapWX({ ak: 'Your_Baidu_API_AK' }); ``` #### 获取当前位置信息 通过调用百度地图SDK提供的接口获取用户的当前地理位置坐标数据，这一步骤对于提供基于位置的服务至关重要： ```javascript export default { data() { return { center: {}, markers: [] }; }, onLoad() { const that = this; wx.getLocation({ type: 'gcj02', success(res) { that.center = { ...res } // 这里可以根据返回的位置参数做更多处理... } }); } } ``` #### 显示地图组件 利用`<map>`标签来呈现地图视图，在其中定义中心点经纬度属性绑定至之前获得的数据模型变量上；同时还可以添加自定义图标作为标记覆盖物放置在指定地点之上[^4]: ```html <template> <view class="container"> <!-- 地图容器 --> <map id="myMap" :latitude="center.latitude" :longitude="center.longitude"></map> <!-- 添加一个按钮用于测试触发事件 --> <button @click="openNavigation">导航</button> <!-- 或者监听地图上的点击事件 --> <map bindtap="handleTapEvent"/> </view> </template> ``` #### 实现导航功能 当用户希望启动导航时，则可以通过构建URL Scheme的方式跳转至外部的地图应用程序执行具体的路径规划操作。这里以腾讯地图为例说明如何构造相应的链接地址格式： ```javascript methods: { openNavigation() { let url = `qqmaps://map/routeplan?type=drive&from=${this.center.latitude},${this.center.longitude}&to=目的地纬度,目的地经度`; wx.navigateTo({url}) }, handleTapEvent(e){ console.log('您点击了地图'); } } ```
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值