How to get the geographical location and display the city name through applet learning

What this article brings to you is how the applet learns to obtain the geographical location and display the city name, so that everyone can know how to display the corresponding city name when positioning in the WeChat applet. It has certain reference value, and friends in need can refer to it, hoping to help you.

Recently, I was reading the WeChat applet and encountered the problem of displaying city names by geographical location. This paper is to record the process of solving this problem.

solution

Wx.getLocation () of the applet obtains the latitude and longitude, but it does not contain the place name, so the place name should be converted with the corresponding map through latitude and longitude (Baidu map is used in this paper).

process

1, generate code:

1), code details:

Wx.getLocation(object): Get the current geographical position and speed.

Note: Users need to authorize geographic location permissions.

Please check the applet API:/miniprogram/dev/API/location.html # wxgetlocationobject for detailed parameter description.

Let's take a look at the data obtained after the success of wx.getLocation ():

We can see from the data that there is no place name we want, so we need to convert the latitude and longitude into the corresponding place name. This paper uses the corresponding function of Baidu map to convert the corresponding place names.

2) Preparation of Baidu map

(1) Before using Baidu Map API, you must first obtain the key ak of Baidu Map, which is generated by Baidu Map;

② open the Baidu map open platform, and select "development document" > "wechat applet JavaScript API" in the navigation bar. How to generate key ak is described in detail in the Getting Started Guide, which is not introduced in this article.

Reference document: /index.php? title=wxjsapi/guide/key

③ Copy the generated ak and paste it into the applet. In fact, Baidu Map has a compressed package that provides the map api used by the applet, but due to the size limitation when the applet is released, I chose to use the link.

Baidu map online conversion link address: /geocoder/v2/? Ak= obtained AK &；; Location ='+Latitude+','+Longitude+'&; Output =json'

④ Log in to WeChat public platform (/) with the account of applet, and select "Development Settings" in "Settings" to add the URL of Baidu Map api to the requested legal domain name.

Note: Baidu Map provides a download package about applet API. If you don't want to use the link address, you can use the download package. Due to the size limitation when the applet is released, this article uses the link address instead of the download package.

(5), after the completion of the preparatory work, you can directly in the applet according to the latitude and longitude to convert the corresponding place names, the code is as follows.

Let's look at the parameter output in success:

There must be a suitable parameter for you ~ ~ ~

2. Attach the complete code:

Data binding in wxml.

Summary: