前言

该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，否则会报错：

![在这里插入图片描述](https://img-blog.csdnimg.cn/619b1966ea214ce284c677e24a4b57af.png

二、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'}.`;},},
};