前言

该demo使用了HTML5的Geolocation API和Google Maps API来获取用户的位置信息，应用libphonenumber库将位置信息转换为国际拨号前缀并在页面默认展示，同时能够严格验证246个国家的手机号格式。如果感兴趣的话可以看下去~

一、引入并启用API

首先，需要在index.html中引入libphonenumber库和Google Maps API，代码如下;

<!-- 引入google map api --><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCP1J2D4-toI4JzUtebVSK3_NAzsydF218"></script><!-- 引入Libphonenumber api --><script src="https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.9.21/libphonenumber-js.min.js"></script>

其中，YOUR_API_KEY应替换为我们自己的Google Maps API密钥。

获取方式为前往https://console.cloud.google.com/，新建项目-API和服务-凭据-创建凭据-API密钥。复制并进行替换。

替换后还需要在该页面搜索并启用以下两个API，否则会报错：

二、js和html页面代码

1.js代码


// 获取用户的位置-检查是否支持Geolocation API
if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(success, error);
} else {console.log("Geolocation is not supported by this browser.");
}// 处理成功获取位置的情况
function success(position) {// 获取用户的经纬度var lat = position.coords.latitude;var lng = position.coords.longitude;// 使用Google Maps API将经纬度转换为地址var geocoder = new google.maps.Geocoder();geocoder.geocode({ 'location': { lat: lat, lng: lng } }, function (results, status) {if (status === 'OK') {// 解析地址中的国家代码var countryCode = results[0].address_components.filter(c => c.types.includes('country'))[0].short_name;// 监听“验证”按钮的点击事件，验证手机号码var button = document.getElementById('validate-button');button.addEventListener('click', function () {var phoneNumber = libphonenumber.parse(document.getElementById('phone-number').value, countryCode);var isValidNumber = libphonenumber.isValidNumber(phoneNumber);var formattedNumber = libphonenumber.formatNumber(phoneNumber, 'E.164');// 将验证结果显示在页面上var result = "The phone number " + formattedNumber + " is " + (isValidNumber ? "valid" : "invalid") + ".";document.getElementById('phone-validation-result').innerHTML = result;});} else {console.log('Geocode was not successful for the following reason: ' + status);}});
}// 处理获取位置失败的情况
function error() {console.log("Unable to retrieve your location.");
}

2.html代码

<body><!-- 在页面中添加一个input输入框 --><input type="text" id="phone-number" placeholder="Enter a phone number"><!-- 在页面中添加一个“验证”按钮 --><button id="validate-button">Validate</button><!-- 在页面中添加一个元素，用于显示验证结果 --><p id="phone-validation-result"></p>
</body>

三、将原生js写在vue项目中

<template><div><!-- 使用v-model指令绑定手机号码 --><input type="text" v-model="phoneNumber" placeholder="Enter a phone number"><!-- 使用按钮来触发验证 --><button @click="validatePhoneNumber">Validate</button><!-- 在页面中添加一个元素，用于显示验证结果 --><p>{{ validationStatus }}</p></div>
</template><script>
import libphonenumber from 'libphonenumber-js';export default {data() {return {phoneNumber: '', // 用于绑定输入框的手机号码countryCode: '', // 用于存储用户所在国家的国家代码validationStatus: '', // 用于显示验证结果的字符串};},mounted() {// 获取用户所在的国家代码if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(this.getCountryCode, this.handleGeolocationError);} else {console.log('Geolocation is not supported by this browser.');}},methods: {// 处理获取位置信息的情况getCountryCode(position) {// 获取用户的经纬度const lat = position.coords.latitude;const lng = position.coords.longitude;// 使用Google Maps API将经纬度转换为地址const geocoder = new window.google.maps.Geocoder();geocoder.geocode({ 'location': { lat: lat, lng: lng } }, (results, status) => {if (status === 'OK') {// 解析地址中的国家代码this.countryCode = results[0].address_components.filter(c => c.types.includes('country'))[0].short_name;} else {console.log('Geocode was not successful for the following reason: ' + status);}});},// 处理获取位置信息失败的情况handleGeolocationError() {console.log('Unable to retrieve your location.');},// 验证手机号码是否有效validatePhoneNumber() {const phoneNumber = libphonenumber.parse(this.phoneNumber, this.countryCode);const isValidNumber = libphonenumber.isValidNumber(phoneNumber);const formattedNumber = libphonenumber.formatNumber(phoneNumber, 'E.164');// 将验证结果显示在页面上this.validationStatus = `The phone number ${formattedNumber} is ${isValidNumber ? 'valid' : 'invalid'}.`;},},
};

p.s. 需要先在项目中安装libphonenumber库！

如何获取用户当前位置并生成国际拨号前缀+验证不同国家的手机号格式相关推荐

html自动获取用户位置,html5获取用户当前位置
支持地理定位的浏览器有IE9+.Firefox 3.5+ .Opera 10.6+ .Safari 5+ .Chrome.iOS 版Safari.Android版WebKit. navigator.g ...
uni-app开发微信小程使用腾讯位置服务获取用户的位置信息
uni-app开发微信小程使用腾讯位置服务获取用户的位置信息一.开通腾讯位置服务二.编码实现 (一)获取定位坐标 (二).在项目中使用一.开通腾讯位置服务在这里我们先要登录腾讯我i之服务的官网 ...
H5使用百度地图SDK获取用户当前位置并且标记显示在地图
代码实现功能: H5使用百度地图SDK获取用户当前位置并且标记显示在地图,点击该标记弹出一层自定义的HTML. 效果图: 代码: <!DOCTYPE html> <html>& ...
根据经纬度获取用户当前位置信息
根据上篇文章获取的经纬度获取用户当前的位置信息 //获取用户所在位置信息ADDRESS func getUserAddress() { let latitude : CLLocationDegrees ...
手机端或PC端利用高德地图和腾讯地图获取用户当前位置信息
目录一.简介二.高德地图三.腾讯地图四.总结一.简介最近在项目中,有需要使用到获取用户当前地理位置信息的功能,获取当前用户位置保存到数据库中的场景,并且需要支持多种地图定位方式,我这里采用 ...
微信小程序 - 获取用户当前位置信息（用于定位地址及获取地址等需求）
前言有两种获取位置的方式,一种是直接返回经纬度等信息(必须代码处理后才能显示到界面上),另一种是 "界面选择式" 由用户打开地图选择位置. 最近有添加用户收货地址需求(外卖项目 ...
Android中获取用户附近位置
最近项目中要获取用户附近位置,供用户选择,该功能分两步实现,第一,获取用户经纬度,第二利,用经纬度通过现有的地理位置接口获取附近位置,实现截图如下: 一.获取用户的经纬度获取用户的经纬度,之前已经介 ...
html自动获取用户位置,HTML5 - 使用Geolocation（地理定位）获取用户的位置
一.Geolocation(地理定位) 1,基本介绍 (1)虽然 Geolocation 经常以 HTML5 的名义提到,但地理定位实际上是一个单独的标准,而且也不是经由 WHATWG 制定的. (2 ...
小程序获取用户当前位置计算距离最近的地铁站并获取对应地区的商品（可手动切换地铁线路及地铁站）
功能介绍主要就是获取到用户当前位置的经纬度,调用后端api接口计算出距离最近的地铁站,并展示对应商家.用户可手动切换或者搜索地铁站点进行切换,切换后展示对应地铁站附近的商家这里手动切换地铁站是直接 ...

如何获取用户当前位置并生成国际拨号前缀+验证不同国家的手机号格式

文章目录

前言