在Next.js中使用TomTom Map SDK，如何在地图视图变更时获取边界？

1. 选对TomTom地图事件 #

TomTom Map SDK里的moveend事件完全匹配你的需求——它会在地图拖拽结束、缩放完成、视图停止变化时触发，一步覆盖所有需要更新餐厅列表的场景，不用单独绑定dragend或zoomend这类单一操作事件。

2. 正确的事件绑定与逻辑实现 #

结合Next.js的React生命周期，要确保地图实例初始化完成后再绑定事件，同时做好清理避免内存泄漏。下面是修正后的组件代码示例：

import { useEffect, useRef, useState } from 'react';
import * as tt from '@tomtom-international/web-sdk-maps';
import '@tomtom-international/web-sdk-maps/dist/maps.css';

const RestaurantMap = () => {
  const mapContainerRef = useRef(null);
  const mapRef = useRef(null);
  const [restaurants, setRestaurants] = useState([]);

  // 根据地图边界查询餐厅的核心函数
  const fetchRestaurants = async () => {
    if (!mapRef.current) return;
    const bounds = mapRef.current.getBounds();
    const sw = bounds.getSouthWest();
    const ne = bounds.getNorthEast();

    // 替换成你的TomTom Search API请求，记得填入自己的API Key
    const res = await fetch(
      `https://api.tomtom.com/search/2/search/restaurant.json?key=你的API_KEY&bbox=${sw.lng},${sw.lat},${ne.lng},${ne.lat}`
    );
    const data = await res.json();
    setRestaurants(data.results);
  };

  useEffect(() => {
    if (!mapContainerRef.current) return;

    // 初始化地图
    const map = tt.map({
      container: mapContainerRef.current,
      key: '你的API_KEY',
      center: [120.1551, 30.2741], // 示例坐标，可替换为用户定位或默认值
      zoom: 13
    });
    mapRef.current = map;

    // 地图加载完成后，执行第一次初始查询
    map.on('load', fetchRestaurants);

    // 绑定moveend事件，视图变化结束后更新餐厅列表
    const handleMapMoveEnd = fetchRestaurants;
    map.on('moveend', handleMapMoveEnd);

    // 组件卸载时清理：移除事件监听+销毁地图实例
    return () => {
      map.off('moveend', handleMapMoveEnd);
      map.remove();
    };
  }, []);

  return (
    <div>
      <div ref={mapContainerRef} style={{ width: '100%', height: '600px' }} />
      <div className="restaurant-list">
        {restaurants.map(rest => (
          <div key={rest.id} className="restaurant-item">
            <h3>{rest.poi.name}</h3>
            <p>{rest.address.freeformAddress}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RestaurantMap;

3. 常见问题排查 #

• 事件绑定时机错误：如果在地图初始化完成前就绑定事件，监听会直接失效。上面的代码在地图实例创建后绑定moveend，同时借助load事件触发初始查询，确保时机正确。
• 未清理事件监听：组件卸载时必须用map.off移除事件监听，否则会引发内存泄漏，拖慢页面性能。
• API参数格式错误：注意bbox参数的格式是minLon,minLat,maxLon,maxLat，对应边界的西南和东北坐标，别搞反顺序。

内容的提问来源于stack exchange，提问作者Deep Shetye