时间戳

首页 > 解决方案 > 在 mapbox gl 中包含自定义地理编码结果作为反应应用程序的一部分

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

问题描述

我正在尝试将函数作为 mapbox gl geocoder 实例的 localGeocoder 参数传递（此处的文档）。我想将其作为反应应用程序的一部分。地理编码器和地图大部分工作正常，但我什至没有进入我在进行地理编码搜索时传递的函数。我对这个设置有什么问题？

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

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

标签： reactjsmapboxgeocodingmapbox-gl

解决方案

亚历克斯，

我为您检查了一个代码框（只需添加您的 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",

也许这可能是问题所在。希望对你有效。

推荐阅读