How can mini programs implement functions similar to friend circle positioning (Amap)

The content of this article is about how small programs can achieve functions similar to circle of friends positioning (Amap). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

Instructions

Due to project needs, this function is similar to the location selection when publishing in WeChat Moments

Ideas

You can use the third-party map service provider API, query the POI list based on the current location, and then display it on the mini program interface

##Effect:

Code implementation

1. Apply for Key and download the core SDK

Refer to the official instructions for this step.
Gaode: https://lbs.amap.com/
Baidu: http://lbsyun.baidu.com/
Tencent: https://lbs.qq.com/
This case Take Gaode as an example.
Download address: https://lbs.amap.com/api/wx/download

2. Set a secure communication domain name

Log in to the WeChat public platform and go to "Settings"-> ;Set the request legal domain name in "Development Settings" and add https://restapi.amap.com to it. As shown below:

Related code

wxml

                 不显示位置    {{item.name}} {{item.address}}     

js

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 }) } }) } })

Related recommendations:

How to implement the three-level selector component in the applet? (Code example)

WeChat Mini Program Example: Implementation Code of Pop-up Window in WeChat Mini Program

The above is the detailed content of How can mini programs implement functions similar to friend circle positioning (Amap). For more information, please follow other related articles on the PHP Chinese website!