H5移动端调用百度或高德地图

vue使用Vant 开发移动端，设计到地图导航，因H5定位不精确，考虑直接使用百度地图或者高德地图进行导航，这里记录一下H5打开百度或高德地图的方法：

一、选择打开百度或者高德地图，使用的是vant的ActionSheet（可全局引入，也可组件引入，我这里是单组件引入）

Html部分

<template>
  <div>
    <div @click="isShowSheet = true">导航</div>
    <van-action-sheet
      v-model="isShowSheet"
      title="使用地图打开"
      :actions="sheetList"
      cancel-text="取消"
      description="如果点击无响应，可能是您还没有安装该APP"
      close-on-click-action
      @select="handleSheetSelect"
    />
  </div>
</template>

Js部分

import Vue from 'vue'
import { ActionSheet } from 'vant'
Vue.use(ActionSheet)
export default {
  data() {
    return {
      isShowSheet: false,
      sheetList: [
        {
          name: '百度地图',
          id: 1,
        },
        {
          name: '高德地图',
          id: 2,
        },
      ],
      latitude: 0,
      longitude: 0,
    }
  },

  mounted() {},

  methods: {
    handleSheetSelect(action) {
      this.navToMap(this.latitude, this.longitude, '目的地', action.id)
    },
    /**
     * 打开高德或百度地图
     * @param {*} latitude
     * @param {*} longitude
     * @param {*} name  导航目的地名称
     * @param {*} type 1 百度地图 2 高德地图
     */
    navToMap(latitude = 0, longitude = 0, name = '目的地', type = 1) {
      let url
      let lat, long
      const u = navigator.userAgent
      //判断ios
      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      //判断Android
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
      if (type == 1) {
        //百度地图 把获取到的非百度坐标转为百度坐标
        lat = latitude
        long = longitude
      } else if (type == 2) {
        //高德地图 把获取到的非GCJ-02坐标转为GCJ-02(火星坐标)
        lat = latitude
        long = longitude
      }
      if (isAndroid) {
        switch (type) {
          case 1: //百度地图
            url = `http://api.map.baidu.com/marker?location=${lat},${long}&title=${name}&content=${name}&output=html`
            break
          case 2: //高德地图
            url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${lat}&lon=${long}&dev=0`
            break
          default:
            break
        }
      } else if (isIOS) {
        switch (type) {
          case 1: //百度地图
            url = `http://api.map.baidu.com/marker?location=${lat},${long}&title=${name}&content=${name}&output=html`
            break
          case 2: //高德地图
            url = `http://uri.amap.com/marker?position=${long},${lat}&name=${name}&src=mypage&coordinate=gaode&callnative=00`
            break
          default:
            break
        }
      }
      if (!validatenull(url)) {
        window.location.href = url
      }
    },
  },
}

二、关于坐标系之间的转换：

1.判断经纬度是否超出中国境内

export function isLocationOutOfChina(latitude, longitude) {
  if (longitude < 72.004 || longitude > 137.8347 || latitude < 0.8293 || latitude > 55.8271)
    return true;
  return false;
}

2.将WGS-84(国际标准)转为GCJ-02(火星坐标):（这里要考虑坐标点是否在国内）

export function transformFromWGSToGCJ(latitude, longitude) {
  var ee = 0.00669342162296594323;
  var a = 6378245.0;
  var pi = 3.14159265358979324;

  if (isLocationOutOfChina(latitude, longitude)) {
    //如果坐标点在境外，这里进行处理
    return {
      latitude: 0,
      longitude: 0
    };
  } else {
    var adjustLat = transformLatWithXY(longitude - 105.0, latitude - 35.0);
    var adjustLon = transformLonWithXY(longitude - 105.0, latitude - 35.0);
    var radLat = latitude / 180.0 * pi;
    var magic = Math.sin(radLat);
    magic = 1 - ee * magic * magic;
    var sqrtMagic = Math.sqrt(magic);
    adjustLat = (adjustLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
    adjustLon = (adjustLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
    latitude = latitude + adjustLat;
    longitude = longitude + adjustLon;
  }
  return {
    latitude: latitude,
    longitude: longitude
  };

}

3.将GCJ-02(火星坐标)转为百度坐标

export function transformFromGCJToBaidu(latitude, longitude) {
  var pi = 3.14159265358979324 * 3000.0 / 180.0;

  var z = Math.sqrt(longitude * longitude + latitude * latitude) + 0.00002 * Math.sin(latitude * pi);
  var theta = Math.atan2(latitude, longitude) + 0.000003 * Math.cos(longitude * pi);
  var a_latitude = (z * Math.sin(theta) + 0.006);
  var a_longitude = (z * Math.cos(theta) + 0.0065);

  return {
    latitude: a_latitude,
    longitude: a_longitude
  };
}

4.将百度坐标转为GCJ-02(火星坐标)

export function transformFromBaiduToGCJ(latitude, longitude) {
  var xPi = 3.14159265358979323846264338327950288 * 3000.0 / 180.0;

  var x = longitude - 0.0065;
  var y = latitude - 0.006;
  var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * xPi);
  var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * xPi);
  var a_latitude = z * Math.sin(theta);
  var a_longitude = z * Math.cos(theta);

  return {
    latitude: a_latitude,
    longitude: a_longitude
  };
}

其他的坐标系之间的转换可以根据需求依据上面的方法进行转换

新增：validatenull 这是判断是否为null的方法

function validatenull(val) {
  if (typeof val === 'boolean') {
    return false
  }
  if (typeof val === 'number') {
    return false
  }
  if (val instanceof Array) {
    if (val.length === 0) return true
  } else if (val instanceof Object) {
    if (JSON.stringify(val) === '{}') return true
  } else {
    if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') return true
    return false
  }
  return false
}