所属分类：php教程
因项目需要，该功能类似于微信朋友圈发布时的选择位置
可使用第三方地图服务商的API，根据当前位置查询POI列表，再展示在小程序的界面上
##效果：
程序员必备接口测试调试工具：立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试，同时在线协作，内容实时同步
此步参照官方说明。
高德：https://lbs.amap.com/
百度：http://lbsyun.baidu.com/
腾讯：https://lbs.qq.com/
本案以高德为例。
下载地址：https://lbs.amap.com/api/wx/download
登录微信公众平台，在 “设置”－>”开发设置” 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去。如下图所示：
微博登录
QQ登录
取消
不显示位置
{{item.name}}
{{item.address}}
登录后复制var amapFile = require('../../utils/amap-wx.js');
var markersData = [];Page({ data: { inputShowed: false, inputVal: "", markersData: [], latitude: '', longitude: ''
}, showInput: function() {
this.setData({ inputShowed: true
});
}, hideInput: function() {
this.setData({ inputVal: "", inputShowed: false
});
}, clearInput: function() {
this.setData({ inputVal: ""
});
}, inputTyping: function(e) {
this.setData({ inputVal: e.detail.value
});
}, onLoad: function(options) {
var that = this;
var myAmapFun = new amapFile.AMapWX({ key: '你申请的Key'
});
myAmapFun.getPoiAround({ success: function(data) {
markersData = data.markers;
that.setData({ markersData: markersData
});
}, fail: function(info) {
wx.showModal({ title: info.errMsg
})
}
})
}
})登录后复制相关推荐：
小程序中如何实现三级选择器组件？（代码示例）
微信小程序实例：微信小程序中弹窗的实现代码
以上就是小程序如何能实现类似朋友圈定位的功能（高德地图）的详细内容，更多请关注zzsucai.com其它相关文章！
