使用 react-mapbox-gl（反应）制作 'search this area' of google

Question

我是 MapBox 的新手，正在尝试制作与 googleMap 相同的功能 'Search This Area'。

在我的想象中，我需要用户视图的坐标（左上和右下），然后我可以计算我的点是否在用户视图中它会显示标记。

pointlat, pointlng, lat1, lng1, lat2, lng2

pointlat > lat1 && pointlat < lat2
pointlng > lng1 && pointlng < lng2

有什么方法可以使用 react-mapbox-gl 或 mapbox-gl-js 获取用户视图的左上角和右下角的坐标吗？或者其他方法可以实现此功能？

谢谢:)

Answer 1

https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatbounds 要获取当前地图视图的边界框，请使用

map.getBounds()

或使用类似

的东西

map.getBounds().contains(myMarker.getLatLng())

https://docs.mapbox.com/help/tutorials/local-search-geocoding-api/#the-bbox-parameter

您可以向地理编码器传递一个 bbox，以限制搜索范围（来自 mapbox 示例）：

var geocoder = new MapboxGeocoder({ // Initialize the geocoder
    accessToken: mapboxgl.accessToken, // Set the access token
    mapboxgl: mapboxgl, // Set the mapbox-gl instance
    marker: false, // Do not use the default marker style
    placeholder: 'Search for places in Berkeley', // Placeholder text for the search bar
    bbox: [-122.30937, 37.84214, -122.23715, 37.89838], // Boundary for Berkeley
    proximity: {
      longitude: -122.25948,
      latitude: 37.87221
    } // Coordinates of UC Berkeley
  });

我希望这应该能为您指明正确的方向

使用 react-mapbox-gl（反应）制作 'search this area' of google

Using react-mapbox-gl (react) to make 'search this area' of google

mapbox

reactjs

mapbox-gl-js