Shulou(Shulou.com)06/01 Report--

The knowledge points of this article "case Analysis of Mini Program location Map Development" are not quite understood by most people, so the editor summarizes the following contents, with detailed contents and clear steps, which can be used for reference. I hope you can get something after reading this article. Let's take a look at this "Mini Program location map development case analysis" article.

1. Application scene and Overview of Positioning system

Such as Meituan takeout Mini Program

Point positioning

Point search

Obviously, any e-commerce Mini Program needs to use location services, so today we will do a similar location module.

Overview of positioning module

External page

Internal pages (the internal and external pages below refer to these two)

All right, let's get started.

two。 Locate external module styl

Effect.

Code

/ / wxml {{location}} / / wxss.location {font-size: 17px; width: 100%; background:rgb (196,228,123); display: flex; / * for two block elements * / / * vertically centered * / align-items: center; / * horizontal centered * / justify-content: center;}. Location image {width: 23px; height: 23px;}

Forget the {{location}} above, it is the location information we want to pass from the global variable later, the location symbol is put in the image picture, and we use the flex layout to center the picture and text on the same line (see note).

3. Internal style of positioning module

Effect.

Code (divided into five small modules, see notes)

/ / wxml// search module / / location module location / / current location module current location {{city}} / / Hot cities module Hot cities {{item.cityname}} / / Map module

Because my search box uses the search component in the custom component, I changed it on the basis of the component. The original component is like this.

We need to hide the search icon, we directly set its transparency to 0, and then locate our positioning text and icon directly to the left side of the search box, so the code of the style is as follows (ctrl+f can search directly if too much code is difficult to find)

/ / wxss.dw {color:rgb (0,0,0); position: absolute; top: 14px; left:-2px;}. Dw button {background: white; padding-right: 0; display: flex; align-items: center; font-weight: 600! important;} .nowcity {font-weight: normal;}. Dw image {width: 23px; height: 23px;} page {padding: 10px;} hotcity1 button {margin: 10px; margin-bottom: 0; font-weight: 500! important; border-radius: 10px! important! } .hotcity {margin-top: 6px;} .map_container {position: absolute; top: 0; bottom: 0; left: 0; right: 0;} .header {display: flex;} .search {flex:1;height: 40px borderline: center;background: # fff;} .input {flex:9; height: 40px; background: # fff;}. Input input {background: # f1f1f1f _ 1f _ 1f _ height: 30px }. Search image {width: 70%; height: 25px; padding-top: 9px; padding-left: 5px;} .placeholder {font-size: 14px;} .search image {opacity: 0;} .input {flex:4;}. Input input {position: relative;right: 0px;} .hotcity1 {display: inline;} .map {position: relative;} map {border:5px solid green; text-align: center; margin: 10px auto;position: relative;right: 10px; width: 90%; height: 150px;}

Then click on the search in our search and jump to the new search page with the following results

Here, we can reuse the above search component directly, and the style code will no longer be posted. This module will display the location name of the search automatic match in a loop. The code is as follows.

/ / wxml {{i.name}} / / wxss@import'.. / templates/search/search.wxss';.text_box {margin: 10px 25px; border-bottom:1px solid # c3c3c3; padding-bottom:10px} 4. External jump

When we click on the external location information, we jump to the internal location module. Just now we set the touch event getlocation to the external tag, and then we just set the click jump (navigateto) in the js, but since our location information is assigned with a global variable, we need to set a global variable in app.js as follows

/ / app.jsapp ({globaldata: {city:' is not yet located', userinfo:' none'},)} / / external js// introduces app.jsconst app=getapp () const appg=app.globaldata data: {/ / here you want to initialize location And assign the global variable to it aboutlist:'',location:appg.city}, page ({/ / define the touch event getlocation () {wx.navigateto ({/ / jump to the internal location page url:'. / location/location',})},)} 5. Click to locate

Before doing this function, we need to consider what map interface to use. Commonly used are Baidu Maps, Tencent Map and Amap. This article chooses Amap interface as the demonstration, search https://lbs.amap.com/, register, enter the console, and create new applications.

Add key again

This key is like the verification code when we call the interface on Mini Program. Only with it can we get the location data from Gaode. Then we click on the settings behind key, and then click WeChat Mini Programs sdk.

Click on these two, download the amap-wx.js file, then create a libs file in your Mini Program directory and throw the amap-wx.js in.

Next, we go to the js file of the internal positioning page, because we need to modify the global variables to achieve the effect of modifying the page data, so we also need to introduce app.js and initialize the global variables into data. In addition, we need to introduce Gaud files to implement the call to the Gaud interface. In data, we initialize the popular cities and other data that we will use later.

Fill the const app=getapp () const appg=app.globaldata//key with the keyconst myamapfun = new amapfile.amapwx ({key:'xxxxxxxxxx'}) given to you in the Gaud console. Data: {city:appg.city,hotcity: [{'cityname':' Beijing', longitude:'116.395645038',latitude:'39.9299857781'}, {'cityname':' Shanghai', longitude:'121.487899486',latitude:'31.24916171'}, {'cityname':' Guangzhou', longitude:'113.307649675',latitude:'23.1200491021'}, {'cityname':' Shenzhen', longitude:'114.025973657',latitude:'22.5460535462'} {'cityname':' Wuhan', longitude:'114.316200103',latitude:'30.5810841269'},], tips: {}, / / search for automatically matched content longitude:'116.4',// longitude (initial value in Beijing) latitude:'39.9'// latitude (initial value in Beijing)}

Then we set the click event getcity to the location button. Here we use Amap's method of obtaining address description data. For tutorials, please refer to the tutorials in Wechat sdk on the Gaud console (the same is true for the following tutorials that search for automatic matching prompts)

In addition, we need to add a domain name to Gaud's interface at the backend of Mini Program. The steps are as follows.

Log in to Wechat public platform, "Settings"-> "Development Settings" to set the legal domain name of request, and add the https://restapi.amap.com to it, so that we can request Gaud's data.

Code

Getcity () {myamapfun.getregeo ({success: data= > {/ / that.setdata ({/ / city:data [0] .section.slice (0Power2) / /}) appg.city=data [0] .desc wx.getlocation ({success:res= > {this.setdata ({latitude:res.latitude, longitude:res.longitude}) wx.setstoragesync ('city', appg.city) wx.setstoragesync (' latitude', res.latitude) wx.setstoragesync ('longitude') Res.longitude)}}), fail: function (info) {/ / failed callback console.log (info)}})}

The parameter in the successful callback function of the getregeo method contains the location information (you can output it yourself). We assign it to the global variable, and then use setdata to assign the global variable appg.city to the city in the data (because the appg.city has changed, the page will be updated only after re-assignment). In addition, we need to cache the location information synchronously. The next time you enter the page, check whether there is cached data in onload. If so, use the cached data directly. If not, use the default value. The code is as follows

Onload: function (options) {/ / enter the page to see if there is any cached data. If you don't read the default value again, you can get this.data const latitude=wx.getstoragesync ('latitude') const longitude=wx.getstoragesync (' longitude') const city=wx.getstoragesync ('city') / / in onload. If you are not used to it, you can also use if latitude&&longitude&&city? This.setdata ({latitude:latitude, longitude:longitude}): false}, 6. Pop up the positioning box when it is not positioned

Add a click event to the current location label to determine whether the location is located when the location information is the initial value. When the user clicks OK, you can execute the getcity function once. The effect is as follows

Code

Nowcity () {if (this.data.citycalendar 'not located yet') {wx.switchtab ({url:'.. / about/about',})} else {wx.showmodal ({title: 'not yet positioned', content:'do you want to locate now' Success: (res) = > {if (res.confirm) {this.getcity ()} else if (res.cancel) {return false}})}}, 7. Click on the jump of popular cities to update data

When we click the button inside the popular city, jump to the external page, and update the corresponding popular city name to the global city to transmit to the external page for display. At the same time, we also need to update the longitude and latitude data in the global. For latitude and longitude, you only need to update the cache. The next time you enter the internal positioning page, you can determine whether there is positioning data in the cache. If so, use it directly. The city data is updated + cached, and the code is as follows

Hotcity (e) {const index=e.currenttarget.dataset.hotcityindex / / update appg.city= this.data.hotcity.cityname / / cache wx.setstoragesync ('city', appg.city) wx.setstoragesync (' longitude', this.data.hotcity.latitude) wx.setstoragesync ('longitude', this.data.hotcity.longitude) / jump wx.relaunch ({cityname:'. / about/about', success: () = > {/ / do not write data updates here Write before the jump, because this callback function is executed after all the functions on the page of the jump have been executed, which will cause the data to be updated twice.

In the above code, note that the subscript is passed to js with data-hotcityindex= "{{index}}" in the circular tag of the popular city, and then taken out in js with e.currenttarget.dataset.hotcityindex. This subscript is used to correspond to each object in the array of hot cities, so that we can use this.data.hotcity.cityname to get the name of the city being clicked on, and then update it to appg.city. Note that you cannot use wx.switchtab when you jump, because the external page has already been opened when it comes in from the external page, so using wx.switchtab will only execute the onshow function of the external page, but not onload, which will cause the page data not to be updated.

8. Search jump and enter automatic matching place names

Search to jump to a new page (set a focus event for the internal positioning page)

Bindfocus (e) {wx.navigateto ({url:'.. / locationsearch/locationsearch',})}

Note that the search box of the internal page is not automatically focused, but the search box that jumps to the new search page will automatically focus. We can control the auto-focus by adding auto-focus= "{{autofocus}}" to the input tag of the search component, and then controlling the value of autofocus. The code is as follows

Note that data= "{{xxx}}" is a custom component-specific parameter passing method. You can pass the value in js to the component, but we have to assign a value to autofocus in the data of js on the search page. Here, by the way, the value tips that stores the automatically matched place names is also initialized.

Data: {autofocus:true,tips: {}}

Next, we write input to automatically match place names, and also introduce global variables and Gaud js files in the js of the search page.

Const amapfile = require ('.. /.. / libs/amap-wx.js'); const app=getapp () const appg=app.globaldataconst myamapfun = new amapfile.amapwx ({key:'0c2c8f2007702caa7e0498d6ad072f83'})

Then we monitor the user's input behavior and set it to the bindinput function

Bindinput is defined in the js of the search page

Bindinput (e) {myamapfun.getinputtips ({/ / keywords is required, otherwise you cannot get tips, you will not enter the success function keywords:e.detail.value, success:data= > {this.setdata ({tips:data.tips})}

The above getinputtips is the method of getting the prompt in WeChat Mini Programs sdk mentioned in point 5. You can go to Gao de's tutorial by yourself. I will not repeat it here. The value of the keywords above is the content entered by the user. The API will find the corresponding matching place name according to this and return it in the parameters of the success function. We only need to update tips in the successful callback function, so if we enter Wuhan at this time The effect is as follows

So when we click on the automatically matched place name, we need to return to the external page and update the data and cache. The idea is the same as the jump method above. The code is as follows.

Bindsearch (e) {const location=this.data.tips [e.currenttarget.dataset.searchindex] wx.setstoragesync ('city', location.name) if (location.location0) {const longitude=location.location.split (',') [0] const latitude=location.location.split (',) [1] wx.setstoragesync ('latitude', latitude) wx.setstoragesync (' longitude', longitude) wx.relaunch ({url:'. / about/about' Success: () = > {appg.city=e.currenttarget.dataset.keywords}})} else {wx.relaunch ({url:'.. / about/about', success:) = > {appg.city=e.currenttarget.dataset.keywords settimeout () = > {wx.showtoast ({title:'no longitude and latitude data yet', / / prompt delay time Cannot use the string duration:2000, icon:'none'})}, 500) }})})} above is about the content of the article "case Analysis of Mini Program location Map Development". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.