esri-leaflet-geocoder 在旧版本和当前版本中都有错误

Question

我试图根据项目地址在地图上绘制点，但现在在测试时我只是将地图的视图放在该位置上。我在网上找到了一些信息，提供了执行此操作的功能，它似乎适用于旧版本的库，但最重要的是它给了我错误“不应该导入命名的导出‘版本’（重新导出为‘版本’）来自默认导出模块（只有默认导出很快可用）”。

我决定将库更新到最新版本，现在我收到此错误“TypeError：无法读取未定义的属性（读取'0'）”，经过一些调试后显示它返回空值。我不知道是否有办法摆脱这两个错误有什么帮助。似乎我试图做的是使用旧版本，但错误出现在它之上无论如何这里是我的代码。

import {MapContainer, Marker, Popup, TileLayer, useMap} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-geosearch/dist/geosearch.css";
import * as ELG from 'esri-leaflet-geocoder';

const MapWrapper = () => {

 function Geocoder({ address }) {
        const map = useMap();

        ELG.geocode()
            .text(address)
            .run((err, results, response) => {
                console.log(results.results[0].latlng);
                const { lat, lng } = results.results[0].latlng;
                map.setView([lat, lng], 12);
            });

        return null;
    }

  return (
            <div id="mapid">
                <MapContainer
                    center={[40.730610,-73.935242]}
                    zoom={13}
                    scrollWheelZoom
                    style={{ height: "500px", borderRadius: '10px' }}
                >
                    <TileLayer
                        attribution='Google Maps'
                        url="https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
                    />
                    //Problem here 2.3.4 and 3.1.4
                    <Geocoder address={'nyc'}/>
                </MapContainer>
            </div>

        );
    }

export default MapWrapper;

我试图弄清楚为什么文档中的数组中没有任何内容，但似乎没有任何内容可以解释为什么 .geocode 不起作用。它仍然显示在文档中，但当我尝试在较新版本中使用它时无法识别。我可以使用旧版本，因为它可以满足我的需要，但我需要知道如何摆脱那个讨厌的“不应该从默认导出模块导入命名导出‘版本’（重新导出为‘版本’） （仅默认导出很快可用）”。

Answer 1

您可以在没有 Esri Leaflet Geocoder 和 ArcGIS 的情况下实现地理搜索，因为您可以在简单的 jsFiddle 演示中进行测试：

下面的 Javascript 代码不需要任何 API 密钥或付款：

'use strict';

var myMap = L.map('mapId').setView([40.730610,-73.935242], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(myMap);

var search = new GeoSearch.GeoSearchControl({
  provider: new GeoSearch.OpenStreetMapProvider(),
  style: 'bar',
  showPopup: true,
  popupFormat: ({
      query,
      result
    }) =>
    result.label +
    ': longitude: ' + parseFloat(result.x).toFixed(6) +
    ', latitude: ' + parseFloat(result.y).toFixed(6)
});

myMap.addControl(search);

html, body { 
  margin: 0;
  padding: 0;
}

#mapId {
  position: absolute;
  width: 100%;
  height: 100%;
}

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-geosearch@3/dist/geosearch.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-geosearch@3/dist/bundle.min.js"></script>

<div id="mapId"></div>