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

Map point selection component

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.