地理围栏（Geofencing）是一种根据设备所在位置来触发某些行为的技术。使用 jQuery 实现地理围栏功能需要结合 HTML5 的地理位置 API，可以通过 navigator.geolocation 对象来获取用户的当前位置信息，并使用 jQuery 事件监听器绑定围栏触发事件。下面是一个简单的示例代码：
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Geofencing Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>当前位置: <span id="location"></span></p>
<p>是否在围栏内: <span id="status"></span></p>
<div id="map" style="width: 500px; height: 500px;"></div>
<script>
// 初始化地图
function initMap() {
// 设置地图中心点和缩放级别
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: 37.7749, lng: -122.4194}
});
// 创建地理围栏
var fence = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: {lat: 37.7749, lng: -122.4194},
radius: 100 // 围栏半径，单位为米
});
// 监听位置变化事件
navigator.geolocation.watchPosition(function(position) {
// 获取当前位置
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var location = lat + ', ' + lng;
$('#location').text(location);
// 判断是否在围栏内
var point = new google.maps.LatLng(lat, lng);
if (google.maps.geometry.spherical.computeDistanceBetween(point, fence.getCenter()) <= fence.getRadius()) {
$('#status').text('是');
} else {
$('#status').text('否');
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
上面的代码中需要替换 YOUR_API_KEY 为自己的 Google Maps API 密钥。
JavaScript 代码：
// 监听位置变化事件
navigator.geolocation.watchPosition(function(position) {
// 获取当前位置
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var location = lat + ', ' + lng;
$('#location').text(location);
// 判断是否在围栏内
var point = new google.maps.LatLng(lat, lng);
if (google.maps.geometry.spherical.computeDistanceBetween(point, fence.getCenter()) <= fence.getRadius()) {
$('#status').text('是');
} else {
$('#status').text('否');
}
});
上面的代码中使用了 navigator.geolocation.watchPosition 函数监听用户位置变化事件，并通过 google.maps.geometry.spherical.computeDistanceBetween 方法计算当前位置与围栏中心点的距离，如果小于等于围栏半径，则说明用户在围栏内，否则说明用户在围栏外。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Geofencing Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>当前位置: <span id="location"></span></p>
<p>是否在围栏内: <span id="status"></span></p>
<div id="map" style="width: 500px; height: 500px;"></div>
<script>
// 初始化地图
function initMap() {
// 设置地图中心点和缩放级别
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: 37.7749, lng: -122.4194}
});
// 创建地理围栏
var fence = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: {lat: 37.7749, lng: -122.4194},
radius: 100 // 围栏半径，单位为米
});
// 监听位置变化事件
navigator.geolocation.watchPosition(function(position) {
// 获取当前位置
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var location = lat + ', ' + lng;
$('#location').text(location);
// 判断是否在围栏内
var point = new google.maps.LatLng(lat, lng);
if (google.maps.geometry.spherical.computeDistanceBetween(point, fence.getCenter()) <= fence.getRadius()) {
$('#status').text('是');
} else {
$('#status').text('否');
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
上面的代码中需要替换 YOUR_API_KEY 为自己的 Google Maps API 密钥。注意，该示例代码需要在一个支持 HTML5 地理位置 API 的浏览器中运行，否则可能会出现兼容性问题。
