将自定义地理编码结果作为 React 应用程序的一部分包含在 mapbox gl 中

Question

我正在尝试传递一个函数作为 mapbox gl 地理编码器实例 (docs here) 的 localGeocoder 参数。我想将此作为反应应用程序的一部分。地理编码器和地图大部分工作正常，但我什至没有进入我在进行地理编码搜索时传递的功能。此设置有什么问题？

我知道 localGeocoder 函数应该 return carmen geojson 格式的一组 geojson 特征，但由于我无法让它工作，所以我只是放了一个 console.log( ) 函数中的语句并查看浏览器中的开发工具，它没有执行。该组件的主要部分如下，但您需要填写自己的 mapbox accessToken 才能使其正常工作。我知道 mapbox 有一个关于如何传递 localGeocoder 函数的 working example，但它没有使用 react，我认为这就是我在这里出错的地方，所以这个例子对我没有太大帮助。

import React from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css'
import Geocoder from 'mapbox-gl-geocoder';
import 'mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
import './map.scss';

mapboxgl.accessToken = ENTER_YOUR_MAPBOX_ACCESS_TOKEN_HERE;    
export class Map extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      lng: -73.9392,
      lat: 40.8053,
      zoom: 15
    };

    this.forwardGeocoder = this.forwardGeocoder.bind(this);
  }

  forwardGeocoder(query) {
    console.log('QUERY:', query);
  }
  
  componentDidMount() {
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom,
      zoomAnimation: false
    });

    const geocoder = new Geocoder({
      accessToken: mapboxgl.accessToken,
      mapboxgl: mapboxgl,
      autocomplete: false,
      localGeocoder: this.forwardGeocoder,
      proximity: {longitude: this.state.lng, latitude: this.state.lat}
    })
    
    map.addControl(geocoder);
  }

  render() {
    return <div ref={el => this.mapContainer = el} className='mapContainer' />
  }
}

Answer 1

亚历克斯，

我给你做了一个codesandbox检查（只需要加你API键）。

如果您搜索咖啡，您将在控制台中看到 QUERY: coffee。

因此，您的代码与我的代码的唯一区别是：

mapbox-gl-geocoder 导入。

你是这样的：

import Geocoder from 'mapbox-gl-geocoder';
import 'mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'

我是这样做的：

import Geocoder from "@mapbox/mapbox-gl-geocoder";
import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";

因为我不知道你是如何添加 mapbox-gl-geocoder 包的，我将描述我是如何添加的：

我正在使用纱线：

yarn add react-map-gl-geocoder

如果您使用的是 npm：

npm install react-map-gl-geocoder

在那之后，我的 package.json 有这个版本：

"react": "^16.13.1",
"mapbox-gl": "^1.3.1",
"@mapbox/mapbox-gl-geocoder": "^4.7.0",

也许这就是问题所在。希望对你有用。

将自定义地理编码结果作为 React 应用程序的一部分包含在 mapbox gl 中

Include custom geocoding results in mapbox gl as part of a react app

geocoding

mapbox

reactjs

mapbox-gl