问题描述
我正在尝试传递一个函数作为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
可能是问题所在。希望它对您有用。