vue手机端打开高德地图app

方法一：通过经纬度，打开高德地图app

1. 国家2000转高德经纬度（如果是高德地图对应的经纬度，就略过这步）

const pi = 3.14159265358979324
const a = 6378245.0
const ee = 0.0066934216229659432

// 国家2000的经纬度转为高德的经纬度
export function wgs_gcj_encrypts(wgLat, wgLon) {
  var point = {}
  console.log(outOfChina(wgLat, wgLon))
  if (outOfChina(wgLat, wgLon)) {
    point.lat = wgLat
    point.lng = wgLon
    return point
  }
  var dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
  var dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
  var radLat = wgLat / 180.0 * pi
  var magic = Math.sin(radLat)
  magic = 1 - ee * magic * magic
  var sqrtMagic = Math.sqrt(magic)
  dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi)
  dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi)
  var lat = wgLat + dLat
  var lon = wgLon + dLon
  point.lat = lat
  point.lon = lon
  return point
}
export function transformLon(x, y) {
  var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
  ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0
  ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0
  ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0
  return ret
}
export function transformLat(x, y) {
  var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
  ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0
  ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0
  ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0
  return ret
}
export function outOfChina(lat, lon) {
  if (lon < 72.004 || lon > 137.8347) { return true }
  if (lat < 0.8293 || lat > 55.8271) { return true }
  return false
}

2. 如果是高德经纬度，打开高德地图方式

/* Start  判断手机是IOS还是安卓 */
  const u = navigator.userAgent
  // 判断是否安卓
  const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
  // 判断是否IOS
  const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  if (isAndroid) {
  	// 方法一
    // const queryStr = 'https://uri.amap.com/marker?position=' + lat + ',' + lng + '&name=' + address
    // 方法二
    // const url = 'androidamap://viewMap?sourceApplication=app名字&poiname=' + address + '&lat=' + lng + '&lon=' + lat + '&dev=0'
    // 方法三
    const url = 'amapuri://route/plan/sid=BGVIS1?&dname=' + address + '&dlat=' + lng + '&dlon=' + lat + '&dev=0&t=0'
    window.open(url)
  }
  if (isIOS) {
    // 方法一
    // const queryStr = 'https://uri.amap.com/marker?position=' + lat + ',' + lng + '&name=' + address
    // 方法二
    // const url = 'iosamap://viewMap?sourceApplication=app名字&poiname=' + address + '&lat=' + lng + '&lon=' + lat + '&dev=0'
    // 方法三
    const url = 'iosamap://path?sourceApplication=app名字&sid=BGVIS1&dname=' + address + '&dlat=' + lng + '&dlon=' + lat + '&dev=0&t=0'
    window.open(url)
  }

方法二：通过地址，打开高德地图app

1.需要申请高德key，调用高德web api，把地址转换为高德经纬度

高德官网实例：https://lbs.amap.com/api/webservice/guide/api/georegeo

注意：地理编码是将详细的结构化地址转换为高德经纬度坐标。且支持对地标性名胜景区、建筑物名称解析为高德经纬度坐标。最好把城市名加上，比如北京市，让地址更加准确。

// 根据地址返回高德经纬度 
export const addressRequest = (address) => {
  return new Promise(function(resove, reject) {
    if (address.indexOf('xx市') === -1) {
      address = 'xx市' + address
    }
    const newUrl = 'https://restapi.amap.com/v3/geocode/geo?key=应用的高德key&address=' + address
    return axios({
      url: newUrl,
      method: 'get',
      timeout: 60000
    })
      .then(res => {
        console.log(res)
        const location = res.data.geocodes[0].location.split(',')
        const reslocation = {
          x: location[0],
          y: location[1]
        }
        const resObj = {
          code: 200,
          data: reslocation
        }
        resove(resObj)
      }).catch(err => {
        // console.log('err', err)
        reject(err)
      })
  })
}

2. 打开高德地图方式

  /* Start  判断手机是IOS还是安卓 */
  const u = navigator.userAgent
  // 判断是否安卓
  const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
  // 判断是否IOS
  const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  if (isAndroid) {
  	// 方法一
    // const queryStr = 'https://uri.amap.com/marker?position=' + lat + ',' + lng + '&name=' + address
    // 方法二
    // const url = 'androidamap://viewMap?sourceApplication=app名字&poiname=' + address + '&lat=' + lng + '&lon=' + lat + '&dev=0'
    // 方法三
    const url = 'amapuri://route/plan/sid=BGVIS1?&dname=' + address + '&dlat=' + lng + '&dlon=' + lat + '&dev=0&t=0'
    window.open(url)
  }
  if (isIOS) {
    // 方法一
    // const queryStr = 'https://uri.amap.com/marker?position=' + lat + ',' + lng + '&name=' + address
    // 方法二
    // const url = 'iosamap://viewMap?sourceApplication=app名字&poiname=' + address + '&lat=' + lng + '&lon=' + lat + '&dev=0'
    // 方法三
    const url = 'iosamap://path?sourceApplication=app名字&sid=BGVIS1&dname=' + address + '&dlat=' + lng + '&dlon=' + lat + '&dev=0&t=0'
    window.open(url)
  }