在uniapp微信小程序中使用百度地图

最新推荐文章于 2025-04-17 08:34:53 发布

浅夏、淡夏

最新推荐文章于 2025-04-17 08:34:53 发布

阅读量2.4k

点赞数 11

文章标签：改行学it

本文链接：https://blog.csdn.net/qq_45281478/article/details/135630156

版权

本文详细介绍了如何在微信小程序中集成百度地图，包括申请秘钥AK、引入JS模块、导入JSAPI并实现定位、地址解析等功能的步骤和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**第一步：**申请秘钥AK，这个自行百度申请。
**第二步：**引入百度地图js模块

微信小程序JSAPI下载

在这里插入图片描述
下载js文件后，解压，并放到项目中。
**第三步：**在项目中导入js API ,

html代码：复制百度地图官网的。最主要是js代码。

<map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map>

js首先需要导入js api

var bmap = require('@/utils/bmap-wx.min.js');   //require里面是存放路径

请求定位，当不传参数的时候，会默认是请求当前位置。

var BMap = new bmap.BMapWX({ 
              ak: 'AK：自己申请的AK' 
              }); 
      BMap.regeocoding({ 
              fail: resp=>{
                      console.log(resp,'失败');
              }, 
              success: resp=>{
                      console.log(resp,'成功');
              }, 
      });

根据经纬度，请求具体地址

var BMap = new bmap.BMapWX({ 
              ak: 'AK：自己申请的AK' 
              }); 
      BMap.regeocoding({ 
             location: latitude + "," + longitude, //这里传的是经纬度
              fail: resp=>{
                      console.log(resp,'失败');
              }, 
              success: resp=>{
                      console.log(resp,'成功');
              }, 
      });

根据地址请求经纬度

BMap.geocoding({ 
             addres:'广东省广州市', //这里传的是地址
              fail: resp=>{
                      console.log(resp,'失败');
              }, 
              success: resp=>{
                      console.log(resp,'成功');
              }, 
      });

感谢阅读