获取ip（公网和内网） 前端通过高德api获取位置信息

获取ip（公网和内网） 前端通过高德api获取位置信息

获取ip

//获取公网ip
getIp() {
  this.$axios.get('http://api.ipify.org').then((res) => {
  	if (res) {
      console.log(res, '公网ip');
    }
    }).catch((e) => {
      console.log('e', e);
    });
},

//获取内网ip
this.getIP((ip) => {
    console.log('内网ip', ip);
});

getIP(onNewIP) {
      // 获取用户IP地址
      let MyPeerConnection =
        window.RTCPeerConnection ||
        window.mozRTCPeerConnection ||
        window.webkitRTCPeerConnection;
      let pc = new MyPeerConnection({
        iceServers: [],
      });
      let noop = () => {};
      let localIPs = {};
      let ipRegex =
        /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
      let iterateIP = (ip) => {
        if (!localIPs[ip]) onNewIP(ip);
        localIPs[ip] = true;
      };
      pc.createDataChannel('');
      pc.createOffer()
        .then((sdp) => {
          sdp.sdp.split('\n').forEach(function (line) {
            if (line.indexOf('candidate') < 0) return;
            line.match(ipRegex).forEach(iterateIP);
          });
          pc.setLocalDescription(sdp, noop, noop);
        })
        .catch((reason) => {});
      pc.onicecandidate = (ice) => {
        if (
          !ice ||
          !ice.candidate ||
          !ice.candidate.candidate ||
          !ice.candidate.candidate.match(ipRegex)
        )
          return;
        ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
      };
    },
    

判断手机类型

const u = navigator.userAgent,
app = navigator.appVersion;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // 安卓
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
//isAndroid和 isIOS是boolean类型

与安卓交互

created() {
	window.appToLocation = this.appToLocation; // 获取定位信息回调
}
methods: {
appToLocation(
      paramOne,
      paramTwo,
      paramThree,
      paramFour,
      paramFive,
      paramSix,
      paramSeven,
      paramEight
    ) {
      console.log(paramOne,paramTwo,paramThree)
    },

}

判断浏览器（移动端）

isWeixin() {
      //判断是否是微信内置浏览器
      return navigator.userAgent.indexOf('MicroMessenger') > 0;
    },
    
    //钉钉
    window.navigator.userAgent.includes('DingTalk')

前端通过高德api获取位置信息

1.引用（index.html）

<script type="text/javascript" src="https://webapi.amap.com/maps?
v=2.0&key=你自己的key&plugin=AMap.Geolocation"></script>
    

2.配置vue.config.js

chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@c', resolve('src/components'))
      .set('@u', resolve('src/utils'))
    //高德
    config.externals({
      AMap: 'AMap',
      AMapUI: 'AMapUI',
      })
  },

3.获取位置信息

this.getMap().then((result) => {
   console.log('定位', result);
})

getMap() {
      //前端获取位置信息
      return new Promise((resolve, reject) => {
        AMap.plugin('AMap.Geolocation', () => {
          var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,
            useNative: true,
            timeout: 10000,
            needAddress: true,
          });
          geolocation.getCityInfo((status, result) => {
            if (status === 'complete') {
              resolve(result);
            } else {
              reject(new Error('获取定位失败'));
            }
          });
        });
      });
    },