如何实现Marker进入地图内任意Polygon时触发通知？

我来帮你搞定这个问题！核心就是要实时检测Marker的位置是否落在某个Polygon范围内，并在进入时触发通知。下面是具体的实现思路和代码示例：

关键步骤说明 #

• 先把所有的Polygon实例存起来，方便后续遍历检查
• 监听Marker的位置变化事件，每次位置更新时，逐个检查它是否在某个Polygon里
• 做个“状态记录”，避免同一个Polygon重复触发通知（比如Marker一直在Polygon里移动，不用每次都弹通知）

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
  <!-- 引入Google Maps API（需替换成你的API密钥，且确保包含geometry库） -->
  <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=geometry"></script>
  <script>
    // 初始化Firebase（保留你原有配置）
    var config = {
      // 你的Firebase配置信息
    };
    firebase.initializeApp(config);

    // 地图相关变量
    var map;
    var userMarker;
    var polygons = []; // 存储所有Polygon实例
    var currentPolygon = null; // 记录Marker当前所在的Polygon

    function initMap() {
      // 初始化地图
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 40.7128, lng: -74.0060},
        zoom: 12
      });

      // 创建用户Marker
      userMarker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        title: '我的位置'
      });

      // 示例：添加测试用Polygon（替换成你的实际Polygon数据）
      var polygon1 = new google.maps.Polygon({
        paths: [
          {lat: 40.710, lng: -74.010},
          {lat: 40.715, lng: -74.010},
          {lat: 40.715, lng: -74.005},
          {lat: 40.710, lng: -74.005}
        ],
        map: map,
        fillColor: '#FF0000',
        fillOpacity: 0.3
      });
      polygons.push(polygon1);

      var polygon2 = new google.maps.Polygon({
        paths: [
          {lat: 40.705, lng: -74.000},
          {lat: 40.710, lng: -74.000},
          {lat: 40.710, lng: -73.995},
          {lat: 40.705, lng: -73.995}
        ],
        map: map,
        fillColor: '#00FF00',
        fillOpacity: 0.3
      });
      polygons.push(polygon2);

      // 监听Marker位置变化，触发检测逻辑
      google.maps.event.addListener(userMarker, 'position_changed', checkMarkerInPolygon);

      // 模拟Marker位置更新（替换成你从Firebase或其他渠道获取的真实位置）
      setInterval(function() {
        var newLat = userMarker.getPosition().lat() + (Math.random() - 0.5) * 0.002;
        var newLng = userMarker.getPosition().lng() + (Math.random() - 0.5) * 0.002;
        userMarker.setPosition(new google.maps.LatLng(newLat, newLng));
      }, 2000);
    }

    // 检测Marker是否在Polygon内的核心函数
    function checkMarkerInPolygon() {
      var markerPos = userMarker.getPosition();
      var foundPolygon = null;

      // 遍历所有Polygon，检查当前位置是否在其中
      polygons.forEach(function(polygon) {
        if (google.maps.geometry.poly.containsLocation(markerPos, polygon)) {
          foundPolygon = polygon;
        }
      });

      // 判断是否进入新区域或离开区域
      if (foundPolygon && foundPolygon !== currentPolygon) {
        // 触发通知，这里用alert示例，可替换成自定义弹窗/系统通知
        alert('你进入了一个新区域！');
        currentPolygon = foundPolygon;
      } else if (!foundPolygon && currentPolygon) {
        // 可选：离开区域时也触发通知
        alert('你离开了当前区域！');
        currentPolygon = null;
      }
    }

    // 页面加载完成后初始化地图
    $(document).ready(function() {
      initMap();
    });
  </script>
</head>
<body>
  <div id="map" style="height: 600px; width: 100%;"></div>
</body>
</html>

关键细节解释 #

• google.maps.geometry.poly.containsLocation：这是Google Maps API提供的核心检测方法，专门判断点是否在多边形内，一定要确保API URL里包含&libraries=geometry才能使用
• currentPolygon状态变量：用来跟踪Marker当前所在的Polygon，避免位置变化时重复触发通知，只有进入新区域或离开区域时才会触发提醒
• 位置监听：通过position_changed事件监听Marker的位置变动，不管是手动拖动Marker还是代码更新位置，都会自动触发检测逻辑

如果你的地图不是Google Maps，核心逻辑也是相通的：找到对应地图API的“点在多边形内”检测方法，监听Marker位置变化，遍历所有Polygon进行判断即可。

内容的提问来源于stack exchange，提问作者Bruno Casas Pescador