小程序中使用百度地图

简介: 介绍小程序中调用百度地图常用的三个方法。(使用前记得先要去百度官网注册需要使用的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'
            });
相关文章
|
9月前
|
移动开发 小程序 JavaScript
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
134 1
|
7月前
|
移动开发 小程序 定位技术
小程序引入高德/百度地图坐标系详解
小程序引入高德/百度地图坐标系详解
287 0
|
10月前
|
小程序 定位技术
小程序地图转百度地图坐标
小程序地图转百度地图坐标
102 0
|
14天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
14天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
14天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
14天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
14天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
1月前
|
小程序 API
点餐小程序实战教程09-订单功能开发
点餐小程序实战教程09-订单功能开发
|
14天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。