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