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

问题描述

我正在尝试传递一个函数作为mapBox gl地理编码器实例（docs here）的localGeocoder参数。我想将它作为React应用程序的一部分。地理编码器和地图在大多数情况下都可以正常工作，但是在进行地理编码搜索时，我什至没有进入要传递的功能。此设置有什么问题？

我知道localGeocoder函数应该以carmen geojson格式返回一个geojson特征数组，但是由于我无法使它起作用，所以我只需要在函数中放入console.log（）语句并查看浏览器中的开发工具，但未执行。该组件的主要部分在下面，但是您需要填写自己的地图框accesstoken才能使其正常工作。我知道mapBox有working example的如何传递localGeocoder函数的信息，但是它不使用react，我认为这就是我要出问题的地方，因此该示例对我并没有太大帮助。 / p>

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' />
  }
}

解决方法

亚历克斯，

我对您进行了codesandbox的检查（只需添加您的API密钥）。

如果您搜索咖啡，则会在控制台中看到NUMBER。

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

QUERY: coffee导入。

您正在这样做：

mapbox-gl-geocoder

我正在这样做：

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

由于我不知道您是如何添加mapbox-gl-geocoder程序包的，因此我将描述我的操作方式：

我在用纱线：

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

如果您使用的是npm：

yarn add react-map-gl-geocoder

之后，我的package.json具有以下版本：

npm install react-map-gl-geocoder

可能是问题所在。希望它对您有用。

geocoding mapbox mapbox-gl reactjs reactjs