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

---

前言

该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 (