打算在 google 地图上移动的标记会创建两对。一个移动,一个卡在初始位置
Markers which are meant to move on google map creates two pairs. One that moves and one that is stuck on initial position
我一直在尝试在 React 中实现一个 Web 应用程序,该应用程序在地图上显示所有空中飞机。
为此,我将 React-Google-Maps 与 Opensky Network API.
一起使用
我的问题很奇怪。当应用程序首次加载并且所有标记都已定位时,它看起来很好。但是当标记开始移动时,初始标记(应该移动的标记)仍然存在,而标记的新副本正在从初始位置移动。因此(在标记移动之后)我在地图上为每架飞机设置了 2 组标记。一个用于初始负载(即不动),一个用于移动。
我已将我的地图组件编码为每秒从 API 获取数据并在获取完成后更新状态。
知道为什么当状态更新时第一个加载的标记没有被删除吗?
import React, { useState, useEffect } from 'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from 'react-google-maps';
//import * as aircrafts from '../../data/aircrafts.json';
function Map() {
const [selectedAirplane, setSelectedAirplane] = useState(null);
// Set state (locations of airplanes) to initial request as markers
const [airplanes, setAirplanes] = useState([]);
useEffect(() => {
const interval = setInterval(() => {
// Update state (markers) every second
fetch('https://opensky-network.org/api/states/all', { method: "GET" })
.then(res => res.json())
.then(response => {
setAirplanes(response["states"]);
//console.log(response["states"])
});
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<div>
<GoogleMap
defaultZoom={10}
defaultCenter={{ lat: 57.041401, lng: 12.401050 }}
>
{ airplanes.map((airplane) => (
<Marker
key={airplane[0]}
position={{
lat: airplane[6],
lng: airplane[5]
}}
onClick={() => {
setSelectedAirplane(airplane);
}}
/>
))}
{selectedAirplane && (
<InfoWindow
position={{
lat: selectedAirplane[6],
lng: selectedAirplane[5]
}}
onCloseClick={() => {
setSelectedAirplane(null);
}}
>
<div>Airplane Details</div>
</InfoWindow>
)}
</GoogleMap>
</div>
);
}
const WrappedMap = withScriptjs(withGoogleMap(Map));
export default WrappedMap;
编辑:
这是初始加载时的样子:
Initial load
这是 API 开始获取数据时的样子:
Some seconds after initial load
这是几分钟过去后的样子:
Minute or two after initial load
如您所见,首先加载的初始标记并没有消失。我真的不明白为什么。我一直在寻找资源来删除它,但找不到任何资源:/
第二个标记移动得很好,正如我所希望的那样。
非常感谢这里的任何提示,因为我无处可去:(
我已将我的项目上传到 Github,它位于此处:https://github.com/emilwallgren/Flight-Tracker
已解决:
必须从 index.js.
中删除 App 周围的 React.StrictMode
现在可以了:)
我一直在尝试在 React 中实现一个 Web 应用程序,该应用程序在地图上显示所有空中飞机。 为此,我将 React-Google-Maps 与 Opensky Network API.
一起使用我的问题很奇怪。当应用程序首次加载并且所有标记都已定位时,它看起来很好。但是当标记开始移动时,初始标记(应该移动的标记)仍然存在,而标记的新副本正在从初始位置移动。因此(在标记移动之后)我在地图上为每架飞机设置了 2 组标记。一个用于初始负载(即不动),一个用于移动。
我已将我的地图组件编码为每秒从 API 获取数据并在获取完成后更新状态。
知道为什么当状态更新时第一个加载的标记没有被删除吗?
import React, { useState, useEffect } from 'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from 'react-google-maps';
//import * as aircrafts from '../../data/aircrafts.json';
function Map() {
const [selectedAirplane, setSelectedAirplane] = useState(null);
// Set state (locations of airplanes) to initial request as markers
const [airplanes, setAirplanes] = useState([]);
useEffect(() => {
const interval = setInterval(() => {
// Update state (markers) every second
fetch('https://opensky-network.org/api/states/all', { method: "GET" })
.then(res => res.json())
.then(response => {
setAirplanes(response["states"]);
//console.log(response["states"])
});
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<div>
<GoogleMap
defaultZoom={10}
defaultCenter={{ lat: 57.041401, lng: 12.401050 }}
>
{ airplanes.map((airplane) => (
<Marker
key={airplane[0]}
position={{
lat: airplane[6],
lng: airplane[5]
}}
onClick={() => {
setSelectedAirplane(airplane);
}}
/>
))}
{selectedAirplane && (
<InfoWindow
position={{
lat: selectedAirplane[6],
lng: selectedAirplane[5]
}}
onCloseClick={() => {
setSelectedAirplane(null);
}}
>
<div>Airplane Details</div>
</InfoWindow>
)}
</GoogleMap>
</div>
);
}
const WrappedMap = withScriptjs(withGoogleMap(Map));
export default WrappedMap;
编辑: 这是初始加载时的样子: Initial load
这是 API 开始获取数据时的样子: Some seconds after initial load
这是几分钟过去后的样子: Minute or two after initial load
如您所见,首先加载的初始标记并没有消失。我真的不明白为什么。我一直在寻找资源来删除它,但找不到任何资源:/
第二个标记移动得很好,正如我所希望的那样。
非常感谢这里的任何提示,因为我无处可去:( 我已将我的项目上传到 Github,它位于此处:https://github.com/emilwallgren/Flight-Tracker
已解决: 必须从 index.js.
中删除 App 周围的 React.StrictMode现在可以了:)