preface
A series of problems caused by using the map point selection component:
1. The callback path of the selected address is not compatible with hash routing
2. After the callback, Tencent map returned the complete address, and the user needs the specific name of the province and city
3. How to match the corresponding ID with the back-end data after obtaining the specific name of the province or city
Related documents
design sketch:
Start using
The second method of map API is adopted. Jump to a new page and bring the address information back to the original page through the 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 = change here to your Tencent map key & referer = here is the name of Tencent map application`
url processing:
-
Why do you need such a troublesome splicing?
Because if I take the window every time location. Href then, if the user selects the address many times and uses escape transcoding, the Chinese of the path will be transferred, but we don't need to put the parameters brought by Tencent map back into the callback address every time, so we need to splice the path ourselves
-
Why need escape
The original hash routing mode is used in vue. That is, the path will be taken with #. At this time, the callback address cannot be recognized, so escape is needed
After url processing, you can jump to the past if you find it. Then the first step was successful. The first problem is solved: the callback path of the selected address is incompatible with hash routing
Question 2 The name of the province or city is required
This is a random point on the map. The path return is probably these parameters
Contains
name = impression Home Hotel Apartment% 28 Guangyuan Middle Road store% 29 & latng = 23.15809113.27209 & addr = No. 216 Guangyuan Middle Road, Baiyun District, Guangzhou City, Guangdong Province & city = Guangzhou City & module = locationpicker
It's probably like this:
{ name: "Detailed address name", latng: "Selection of longitude and latitude address", addr: "Provincial and urban areas+Local name", city: "City name", module: "identification" }
Then what I need to deal with is longitude and latitude, as well as the names of provinces and cities
var urlData = this.$route.query // Get parameters on path var latng = urlData.latng.split(",") // Get latitude and longitude var reg = /.+?(province|city|Autonomous Region|autonomous prefecture|county|area)/g // Regulation of provinces and cities console.log(latng) // [23.15809113.27209] this array is the corresponding latitude and longitude console.log(urlData.addr.match(reg)) // ['Guangdong Province', 'Guangzhou City', 'Baiyun District']
Data docking with the backend
Go through the above two steps. Longitude and latitude, detailed address and provincial and urban areas have been obtained. Then it's bad to match the back-end data (different people have different opinions on this operation, not everyone has it)
The back-end data is roughly as follows:
All I have to do is get the Chinese name and match the corresponding ID
methods:{ /** * Recursive method to obtain City ID, etc * @param {Array} list Address list in the database (each cycle will match its own child) * @param {Array} param An array of provinces and municipalities to find * @param {Number} level Depth of current traversal * @param {Array} area_ids Currently, the ID array of provinces and cities found has been traversed * @return Corresponding ID array */ locationGhosts (list, param, level = 0, areaIds = []) { let child = [] list.some(item => { if (param[level].indexOf(item.area_name) !== -1) { areaIds[level] = item.area_id // Storage ID, one found child = item.child return true } }) // Judge not to change the ternary operator. For details, see the description of tail recursion if (level === 2) { return areaIds } else { return this.locationGhosts(child, param, ++level, areaIds) } } } // Call recursion to obtain the corresponding provincial and municipal ID let areaIds = this.locationGhosts(this.area_list, urlData.addr.match(reg), 0) areaIds[0] // Province ID areaIds[1] // City ID areaIds[2] // Region ID
So far, a function of selecting an address is perfectly completed!
The above content is reproduced from Jioho_ Articles Selecting addresses using Tencent maps in vue
Source: CSDN
The copyright belongs to the author. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please indicate the source.