uni-app Tencent map signature calculation

 The call in h5 uses jsonp. Note that the callback will be included in the parameter, and the logic of this parameter needs to be additionally processed.

The library used by jsop here is  vue-jsonp


/**
 * 生成签名
 * @param {*} path
 * @param {*} params
 */
const getSig = function (path, params) {
  const paramsStr = Object.keys(params)
    .sort()
    .reduce((res, key) => {
      const value = params[key]
      return [...res, key + '=' + value]
    }, [])
    .join('&')
  return md5(path + '?' + paramsStr + SECRET_KEY)
}
/**
 * 地图专用API请求(主要是为了处理跨域问题)
 * @param {Object} path
 * @param {Object} param
 */
const mapRequest = function (path, params) {
  return new Promise((resolve, reject) => {
    const callbackName = 'jsonp_' + guid()
    params = {
      key: MAP_KEY,
      output: 'json',
      ...params,
    }
    // #ifdef H5
    params.output = 'jsonp'
    params.callback = callbackName
    // #endif

    params.sig = getSig(path, params)
    const url = 'https://apis.map.qq.com' + path

    // #ifdef H5
    jsonp(url, { ...params, callbackName })
      .then((data) => {
        resolve(data)
      })
      .catch((error) => {
        reject(error)
      })
    // #endif
    // #ifndef H5
    uni.request({
      url: url,
      method: 'GET',
      data: params,
      success: (data) => {
        resolve(data.data)
      },
      fail: (error) => {
        reject(error)
      },
    })
    // #endif
  })
}

Guess you like

Origin blog.csdn.net/cscj2010/article/details/127890711