Я работаю над приложением React, которое отображает фермерские рынки в Филадельфии в качестве маркеров на карте Google с помощью библиотекиact-google-maps.
После создания карты Google я получаю доступ к рыночным данным фермера. через ArcGIS API и циклически перебирая массив данных, чтобы получить маркер для каждого фермерского рынка.
Я столкнулся с проблемой, потому что данные, которые у меня есть для местоположений в ArcGIS, возвращают информацию в виде координат xyкогда мне нужно, чтобы они были в широте и долготе, чтобы Карты Google могли их отображать. К счастью, в ArcGIS есть модуль для этого преобразования и способ использовать эти модули в React .
Я застрял в том, как успешно визуализировать маркер, что означает отображение набора данных, чтобы сначала преобразовать координаты, а затем использовать преобразованные координаты в каждом экземпляре маркера. С помощью приведенного ниже кода я получаю «Ошибка: объекты недопустимы как дочерние элементы React (найдено: [обещание объекта]). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив». Я немного растерялся, любая помощь будет высоко ценится!
const Map = () => {
const [markets, setMarkets] = useState([])
useEffect(() => {
axios.get(apiUrl)
.then(res => {
setMarkets(res.data.features)
})
.catch(err => console.log(err))
},[])
return (
<GoogleMap
defaultZoom={12}
defaultCenter={{ lat: 39.952583, lng: -75.165222 }}
>
{loadModules(['esri/geometry/support/webMercatorUtils'])
.then(([webMercatorUtils]) => {
markets.map(market => {
let latLong = webMercatorUtils.xyToLngLat(market.geometry.x, market.geometry.y)
return <Marker
key={market.attributes.OBJECTID}
position={{
lat: latLong[1],
lng: latLong[0]
}}/>
})
})}
</GoogleMap>
)}
const WrappedMap = withScriptjs(withGoogleMap(Map))
export default WrappedMap