Html5ポジショニングの究極のソリューション

<! -- index.html -->
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=Tencent map key&referer=Application name"></ script>

// tMap.js
const qq = window.qq
var geolocation = null
if (qq && qq.maps) {
  // Initialize the location component
  geolocation = new qq.maps.Geolocation(
    'QVLBZ-YUULR-OUMW7-WKXFD-4SUWS-UDBIA',
    'mymap'
  )
}

class TMap {
  // Get the position counter to accumulate the number of position failures after 3 times and throw a position failure error
  getPositionCount = 0

  // Externally exposed interface to get location
  getLocation () {
    return new Promise((resolve, reject) => {
      // Location success callback
      this.getTMapLocation(resolve, reject)
    })
  }

  // Call Tencent Maps to get the location
  getTMapLocation (success, fail) {
    const _self = this

    // Callback for successful location
    const showPosition = position => {
      uni.setStorage({
        key: 'positionData',
        data: position
      })
      success(position)
    }

    // Positioning failure callback
    const showErr = (err) => 
      // if get position fails more than 3 times throw an error otherwise continue to get position information
      if (this.getPositionCount > 3) {
        fail('Failed to get position more than 3 times')
      } else {
        // Positioning failure recursion
        _self.getPositionCount = _self.getPositionCount + 1
        _self.getTMapLocation(success, fail)
      }
    }

    // Call the Tencent web location component to get the location information
    if (geolocation) {
      geolocation.getIpLocation(showPosition, showErr, {
        timeout: 6000, // location timeout in ms
        failTipFlag: true
      })
    }
  }
}

export default new TMap()

/**
 * microsoft sdk asynchronous loading
 * @param {*} src
 * @param {*} callback api interface
 *export const handlerLoadScript = callback => {
  const src = `https://res.wx.qq.com/open/js/jweixin-1.4.0.js`
  if (! (typeof callback === 'function')) {
    callback = function() {}
  }
  var check = document.querySelectorAll(`script[src="${src}"]`)
  if (check.length > 0) {
    check[0].addEventListener('load', function() {
      callback()
    })
    callback()
    return
  }
  var script = document.createElement('script')
  var head = document.getElementsByTagName('head')[0]
  script.type = 'text/javascript'
  script.charset = 'UTF-8'
  script.src = src
  if (script.addEventListener) {
    script.addEventListener(
      'load',
      function() {
        callback()
      },
      false
    )
  } else if (script.attachEvent) {
    script.attachEvent('onreadystatechange', function() {
      var target = window.event.srcElement
      if (target.readyState === 'loaded') {
        callback()
      }
    })
  }
  head.appendChild(script)
}

/**
 * Inject permission validation configuration
 * @param {object} microsoft js-sdk permission validation configuration
 *export const wxconfigInfo = config => {
  wx.config({
    debug: false, // enable debug mode, the return value of all api calls will be alerted out on the client side, if you want to see the incoming parameters, you can open it on the pc side, the parameter information will be typed out via log, it will only be printed when on the pc side.
    appId: config.appId,
    timestamp: parseInt(config.timestamp),
    nonceStr: config.nonceStr,
    signature: config.signature,
    jsApiList: [ // list of jsapi to use
      ... ,
      'getLocation' // Get the geographic location
    }
  })
}

 /**
 * WeChat get location
 *export const handleGetLocation = (config) => {
  return new Promise((resolve, reject)=>{
    wxconfigInfo(config)
    wx.ready(function () {
      wx.getLocation({
        type: 'wgs84', // default is the gps coordinates of wgs84, if you want to return the Mars coordinates directly to openLocation, you can pass 'gcj02'
        success: function (res) {
          console.warn('WeChat sdk location success', res)
          resolve({
            lat: res.latitude, // latitude
            lng: res.longitude, // longitude
            speed: res.speed, // speed in meters per second
            accuracy: res.accuracy // position accuracy
          })
        },
        fail: function (err) {
          console.error('WeChat sdk location failed', err)
          reject(err)
        }
      })
    })
    wx.error(function(err) {
      // config information verification failure will execute the error function, such as signature expiration lead to verification failure, the specific error information can open the debug mode of the config to view, but also in the returned res parameter to view, for SPA can update the signature here.
      console.log('wxjsapi-error=', err)
      reject(`wxjsapi-error: ${err}`)
    })
  })

// public.js

/**
 * UA enumeration
 *const UA = {
  /**
   * WeChat h5
   *  WECHAT: 'WECHAT',
  /**
   * Alipay h5
   *  ALIPAY: 'ALIPAY',
  /**
   * Other
   *  OTHERS: 'OTHERS'
}


/**
 * Determine the client runtime environment Here only determine the WeChat and browser h5
 *export const getUserAgent = () => {
  var userAgent = navigator.userAgent.toLowerCase()

  if (userAgent.match(/Alipay/i) == 'alipay') {
    return UA.ALIPAY
  } else if (userAgent.match(/MicroMessenger/i) == 'micromessenger') {
    return UA.WECHAT
  } else {
    return UA.OTHERS
  }
}

// js-sdk.js
/**
 * Calling up the microsoft api
 * @param {*} _href current page url
 * @param {*} options sharing information
 * @param {*} apiType Call api type
 *export const handleWXSDKCall = (_href, apiType, options) => {
  return new Promise((resolve, reject)=>{
    // Get configuration information through the backend interface
    WeChatServivce.sign(_href)
      .then(res => {
        if (res) {
          if ( apiType === 'location' ) {
            handleGetLocation(res).then((res)=> {
              resolve(res)
            }).catch(err=>{
              reject(err)
            })
          }
        }
      })
      .catch(err => {
        reject(`err-sign: ${err}`)
        uni.showToast({
          title: err.data.code + err.data.msg,
          mask: true,
          icon: 'none'
        })
      })
  })
}

// getLocation.js
import { getUserAgent, handlerLoadScript } from '@/module/utils'
import { handleWXSDKCall } from '@/module/utils/wechat/wxJsApiSdk'
import UA from '@/module/enums/userAgent'
import TMap from '@/module/utils/tMap'

/**
 * Externally exposed method to get the location
 * @return Promise resolve a positionData object lat-latitude lng-longitude
 *const getLocation = () => {
  return new Promise((resolve, reject) => {
    console.log('Enter global get user location method')
    const storageData = uni.getStorageSync('positionData')
    const userAgent = getUserAgent()
    if (storageData) {
      resolve(storageData)
    } else {
      // Determine based on environment If using WeChat sdk within WeChat Other using Tencent map location component
      if (userAgent === UA.WECHAT) {
        handlerLoadScript(() => {
          handleWXSDKCall(window.location.href, 'location').then((res) => {
            uni.setStorageSync('positionData', res)
            resolve(res)
          }).catch(err => {
            reject(err)
          })
        })
      } else {
        TMap.getLocation().then(res => {
          uni.setStorageSync('positionData', res)
          resolve(res)
        }).catch((err) => {
          reject(err)
        })
      }
    }
  })
}

export default getLocation

import getLocation from '@/module/utils/getLocation'
Vue.prototype.$getLocation = getLocation

onShow() {
  // Get the location information and request the backend interface
  this.$getLocation()
    .then(res => {
      console.warn('Home page get location success', res)
      this.latitude = res.lat
      this.longitude = res.lng
      // Here the backend interface is requested based on the latitude and longitude obtained...
    })
    .catch(err => {
      console.error('Home page failed to get location', err)
      // Error handling
    })
}