为了账号安全,请及时绑定邮箱和手机立即绑定

小程序中使用百度地图

标签:
WebApp

介绍小程序中调用百度地图常用的三个方法。(使用前记得先要去百度官网注册需要使用的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'
            });



作者:王炳祺
链接:https://www.jianshu.com/p/2e40db6c9f41


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消