preface

A number of problems with the map selection component:

1. The callback path of the selected address is incompatible with hash routes

2, after the callback Tencent map returned the complete address, and the user needs the specific name of the province

3. After obtaining the specific name of the province and city, how to match the corresponding ID with the back-end data

The related documents

Map selection component

Effect:

Begin to use

The second approach of the map API is to jump to a new page and bring the address information back to the original page via a callback path

The code is as follows:

let url = escape( `${window.location.origin}${window.location.pathname}/#/member/address_form? action=${this.$route.query.action}` ) this.$router.go(-1) window.location.href = ` https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=${url} & key = here to your tencent map key & referer = this is tencent ` map application nameCopy the code

Url handling:

  • Why the hassle of splicing?

    If the user selects the address multiple times, the escape code will replace the Chinese characters of the path. However, we don’t need to replace the parameters of Tencent map with the callback address each time, so we need to concatenate the path ourselves

  • Why escape is needed

    The original hash routing pattern is used in VUE. The path will be marked with #. The callback address is not recognized and escape is used

Do url processing, found can jump to the past. Then step one is a success. Fixed the first problem: the callback path to the selected address was not compatible with hash routes

Question 2. Names of provinces and cities are required

This is a random point on the map. The path return is basically what these parameters contain

Name = Impression Home Hotel apartment %28 Guangyuan Road store %29&latng=23.15809,113.27209&addr= 216 Guangyuan Road, Baiyun District, Guangzhou, Guangdong province & City = Guangzhou & Module =locationPicker

It goes something like this:

{name: "addr ", latng:" addr ", city: "addr ", module:" id "}Copy the code

So all I have to do is deal with latitude and longitude, and the names of provinces and cities

Var latng = urldata.latng.split (",") var reg = /.+? (province | | | | | city autonomous region autonomous prefecture county area)/g / / provinces, regular console log (latng) / / [23.15809, 113.27209] this array is the corresponding latitude longitude The console. The log (urlData. Addr. Match (reg)) / / [' guangdong province ', 'guangzhou, baiyun district' ']Copy the code

Interconnects with data on the backend

I took two steps above. Latitude and longitude, detailed address, province and city have been obtained. The only difference is matching the backend data.

The back-end data might look like this:

All I have to do is get the Chinese name and match the ID

/** ** * @param {Array} list list of addresses in the database (each loop matches its own child) * @param {Array} Param Array of provinces to find * @param {Number} level Current traversal depth * @param {Array} areA_ids Array of ids of the currently traversed provinces * @return Array of ids corresponding to the current traversal */ locationGhosts (list, param, level = 0, areaIds = []) { let child = [] list.some(item => { if (param[level].indexOf(item.area_name) ! == -1) {areaIds[level] = item.area_id // store ID, child = item.child return true}}) If (level === 2) {return areaIds} else {return this.locationGhosts(Child, param, ++level, AreaIds)}}} // call recursion, Let areaIds = this.locationghosts (this.area_list, urldata.addr. Match (reg), 0) areaIds[0] // Province ID areaIds[1] // city ID areaIds[2] // District IDCopy the code

At this point, an address selection function is complete!

The above content is reprinted from the article “Using Tencent Map to select addresses in Vue” by Jioho_.

Source: CSDN

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.