Esri-leaflet-geocoder:组件未呈现；如何在生产环境中连接提供程序

Question

我使用的是一个很棒的esri-leaflet-geocoder插件，但无法让它在生产环境中呈现。

我注册了一个提供商(ArcGIS在线地理编码服务)，并获得了一个api密钥，然后按照github页面上的documentation添加了api密钥：

var searchControl = L.esri.Geocoding.geosearch({
  providers: [
    L.esri.Geocoding.arcgisOnlineProvider({
      // API Key to be passed to the ArcGIS Online Geocoding Service
      useMapBounds: false,
      apikey: process.env.ESRI_API_KEY
    })
  ]
});

我得到了以下错误：

TypeError: Cannot read property 'Geocoding' of undefined

因此，我转到esri-leaflet-geocoder here的官方文档页面，并尝试了那里列出的内容。事实证明，它似乎更新潮。

var provider = ELG.arcgisOnlineProvider({ token: process.env.ESRI_API_KEY });

var searchControl = new ELG.Geosearch({
  useMapBounds: false,
  providers: [provider]
});

console.log('ELG.arcgisOnlineProvider() ', provider);

console.log('searchControl', searchControl);

它没有工作，但控制台似乎表明，他们确实采取了文档中列出的道具：

ELG.arcgisOnlineProvider()  
NewClass {_requestQueue: Array(0), _authenticating: false, options: {…}, _initHooksCalled: true, _eventParents: {…}}
options:
supportsSuggest: true
token: process.env.ESRI_API_KEY // In the log it's a string
url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/"
__proto__: Object
_authenticating: false
_eventParents: {1: NewClass}
_initHooksCalled: true
_requestQueue: []
__proto__: NewClass


searchControl 
NewClass {options: {…}, _geosearchCore: NewClass, _leaflet_id: 1, _initHooksCalled: true}
options:
providers: Array(1)
0: NewClass
options: {token: process.env.ESRI_API_KEY // Again it is logging a string
url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/", supportsSuggest: true}
_authenticating: false
_eventParents: {1: NewClass}
_initHooksCalled: true
_requestQueue: []
__proto__: NewClass
length: 1
__proto__: Array(0)
useMapBounds: false
__proto__: Object

那么，如何让“searchControl”在生产环境中工作/渲染呢？

Answer 1

这对我很有效：

import * as ELG from "esri-leaflet-geocoder";

var searchControl = ELG.geosearch({
  useMapBounds: false,
  providers: [
    ELG.arcgisOnlineProvider({
      apikey: "your key here"
    })
  ]
});

searchControl.addTo(leafletMap);

Working codesandbox