博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序中使用百度地图
阅读量:6155 次
发布时间:2019-06-21

本文共 2137 字,大约阅读时间需要 7 分钟。

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

转载地址:http://nrbfa.baihongyu.com/

你可能感兴趣的文章
Dijkstra算法
查看>>
css 动画 和 响应式布局和兼容性
查看>>
csrf 跨站请求伪造相关以及django的中间件
查看>>
MySQL数据类型--与MySQL零距离接触2-11MySQL自动编号
查看>>
生日小助手源码运行的步骤
查看>>
Configuration python CGI in XAMPP in win-7
查看>>
bzoj 5006(洛谷 4547) [THUWC2017]Bipartite 随机二分图——期望DP
查看>>
CF 888E Maximum Subsequence——折半搜索
查看>>
欧几里德算法(辗转相除法)
查看>>
面试题1-----SVM和LR的异同
查看>>
MFC控件的SubclassDlgItem
查看>>
如何避免历史回退到登录页面
查看>>
《图解HTTP》1~53Page Web网络基础 HTTP协议 HTTP报文内的HTTP信息
查看>>
unix环境高级编程-高级IO(2)
查看>>
树莓派是如何免疫 Meltdown 和 Spectre 漏洞的
查看>>
雅虎瓦片地图切片问题
查看>>
HTML 邮件链接,超链接发邮件
查看>>
HDU 5524:Subtrees
查看>>
手机端userAgent
查看>>
pip安装Mysql-python报错EnvironmentError: mysql_config not found
查看>>