当前位置：首页 > news >正文

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

news 2025/7/20 17:45:51

获取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('获取定位失败'));}});});});},