小程序中使用百度地图

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 介绍小程序中调用百度地图常用的三个方法。(使用前记得先要去百度官网注册需要使用的ak账号)1.地址解析,方法分为两部,先通过微信获取到用户的坐标,再将坐标传入百度地图api中进行地址解析。

介绍小程序中调用百度地图常用的三个方法。(使用前记得先要去百度官网注册需要使用的ak账号)
1.地址解析,方法分为两部,先通过微信获取到用户的坐标,再将坐标传入百度地图api中进行地址解析。

      //微信获取坐标
     wx.getLocation({
            type: 'wgs84', //默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 
            success: function(res) {
                //  res中longitude和latitude就是所获的的用户位置
                this.longitude = res.longitude
                this.latitude = res.latitude
                //调用坐标解析方法
                this.loadCity(page.longitude, page.latitude)
            }
        })

    //解析坐标
    async loadCity(longitude, latitude) {
        console.log("解析位置")
        let page = this
      //这里的ak记得要使用百度申请的ak账号
        wx.request({
            url: 'https://api.map.baidu.com/geocoder/v2/?ak=**********&location=' + latitude + ',' + longitude + '&output=json',
            data: {},
            header: {
                'Content-Type': 'application/json'
            },
            success: function(res) {
                let city = res.data.result.addressComponent.city;
                this.city = city;
                //city为解析后的城市
            },
            fail: function() {
                page.city = "获取定位失败"
            },
        })
    }
  1. 百度搜索。首先创建百度地图,并且发起suggestion检索请求,在query参数中填入你要查询的关键词。

             //创建百度地图
             let BMap = new bmap.BMapWX({
                 ak: this.ak
             });
             let fail = function() {};
             let success = function() {}
             // 发起suggestion检索请求 
             BMap.suggestion({
                 query: e.detail.value,
                 region: this.city,
                 city_limit: true  ,
                 fail: fail,
                 success: success
             });
    

3.查询附近和周边。创建方法和百度搜索类似,只是改成调用search方法。

      let BMap = new bmap.BMapWX({
                ak: this.ak
            });
            let fail = function() {};
            let success = function() {}
     // 发起POI检索请求 
            BMap.search({
                 "query": '办公楼',
                 fail: fail,
                 success: success,
                 // 此处需要在相应路径放置图片文件 
                 iconPath: 'https://loumayun.oss-cn-shenzhen.aliyuncs.com/mini-program/map.png',
                // 此处需要在相应路径放置图片文件 
                 iconTapPath: '../assets/icons/marker_red.png'
            });
相关文章
|
移动开发 小程序 JavaScript
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
230 1
|
移动开发 小程序 定位技术
小程序引入高德/百度地图坐标系详解
小程序引入高德/百度地图坐标系详解
450 0
|
小程序 定位技术
小程序地图转百度地图坐标
小程序地图转百度地图坐标
156 0
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
220 3
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
49 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
106 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
103 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
3月前
|
存储 小程序 JavaScript
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
62 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
82 7

热门文章

最新文章