无法在Vue应用程序的mapbox-gl中匹配边界

npm install mapbox-gl mapbox-gl-geocoder

yarn add mapbox-gl mapbox-gl-geocoder

import mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';

mounted() {
  mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
  
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [longitude, latitude],
    zoom: 12
  });
  
  const geocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    mapboxgl: mapboxgl
  });
  
  map.addControl(geocoder);
}

geocoder.on('result', (e) => {
  const result = e.result;
  const bounds = result.bbox;
  
  // 在这里进行边界匹配的处理
});

import * as turf from '@turf/turf';

// 假设bounds是一个表示边界的多边形
const point = turf.point([longitude, latitude]);
const polygon = turf.polygon(bounds);

const isInside = turf.booleanPointInPolygon(point, polygon);

if (isInside) {
  // 点在边界内的处理逻辑
} else {
  // 点不在边界内的处理逻辑
}