谷歌地图与react js挂钩集成，地图在更新时闪烁

Question

所以我正在做一个项目，我想集成谷歌地图，所以我下载了这些包(react地理代码和react谷歌地图(，我阅读了他们的文档，在代码沙盒上找到了一段代码来帮助我集成地图，我将代码从类重构到钩子，但是当使用类组件时，映射在更新位置标记时不会闪烁，但当我更新到hook时，当我更改位置标记时，它开始闪烁，是我的代码或我重构的东西遗漏了什么，还是使用hook管理状态的方式使闪烁不可调下面是预计的代码，这是原始代码(https://codesandbox.io/s/modest-platform-g8mjx?file=/src/LocationSearchModal.js)知道我为什么有两个记号笔吗？

import React, { useCallback, useEffect, useState } from "react";
import {
withGoogleMap,
GoogleMap,
withScriptjs,
InfoWindow,
Marker
} from "react-google-maps";
import Geocode from "react-geocode";
import Autocomplete from "react-google-autocomplete";
import { Card } from "react-bootstrap";
Geocode.setApiKey("googleAPIKEYHERE");
Geocode.enableDebug();
const LocationSearchModal = () => {
const [state, setState] = useState({
address: "",
city: "",
area: "",
state: "",
zoom: 15,
height: 400,
mapPosition: {
lat: 55,
lng: 55
},
markerPosition: {
lat: 55,
lng: 55
}
});
const getCity = useCallback((addressArray) => {
let city = "";
for (let i = 0; i < addressArray.length; i++) {
if (
addressArray[i].types[0] &&
"administrative_area_level_2" === addressArray[i].types[0]
) {
city = addressArray[i].long_name;
return city;
}
}
}, []);
const getArea = useCallback((addressArray) => {
let area = "";
for (let i = 0; i < addressArray.length; i++) {
if (addressArray[i].types[0]) {
for (let j = 0; j < addressArray[i].types.length; j++) {
if (
"sublocality_level_1" === addressArray[i].types[j] ||
"locality" === addressArray[i].types[j]
) {
area = addressArray[i].long_name;
return area;
}
}
}
}
}, []);
const getState = useCallback((addressArray) => {
let state = "";
for (let i = 0; i < addressArray.length; i++) {
for (let i = 0; i < addressArray.length; i++) {
if (
addressArray[i].types[0] &&
"administrative_area_level_1" === addressArray[i].types[0]
) {
state = addressArray[i].long_name;
return state;
}
}
}
}, []);
const onChange = (event) => {
setState({ [event.target.name]: event.target.value });
};
const onInfoWindowClose = (event) => {};
const onMarkerDragEnd = useCallback((event) => {
const newLat = event.latLng.lat(),
newLng = event.latLng.lng();
setState((prev) => ({
...prev,
mapPosition: {
lat: newLat,
lng: newLng
},
markerPosition: {
lat: newLat,
lng: newLng
}
}));
Geocode.fromLatLng(newLat, newLng).then(
(response) => {
//     const address = response.results[0].formatted_address,
//       addressArray = response.results[0].address_components,
//       city = getCity(addressArray),
//       area = getArea(addressArray),
//       state = getState(addressArray);
console.log(response);
const address = response.results[0].formatted_address;
let city, state, area;
for (
let i = 0;
i < response.results[0].address_components.length;
i++
) {
for (
let j = 0;
j < response.results[0].address_components[i].types.length;
j++
) {
switch (response.results[0].address_components[i].types[j]) {
case "locality":
city = response.results[0].address_components[i].long_name;
break;
case "administrative_area_level_1":
state = response.results[0].address_components[i].long_name;
break;
case "country":
area = response.results[0].address_components[i].long_name;
break;
}
}
}
setState((prev) => ({
...prev,
address: address ? address : "",
area: area ? area : "",
city: city ? city : "",
state: state ? state : ""
}));
},
(error) => {
console.error(error);
}
);
}, []);
const onPlaceSelected = useCallback(
(place) => {
console.log("plc", place);
const address = place.formatted_address,
addressArray = place.address_components,
city = getCity(addressArray),
area = getArea(addressArray),
state = getState(addressArray),
latValue = place.geometry.location.lat(),
lngValue = place.geometry.location.lng();
console.log("latvalue", latValue);
console.log("lngValue", lngValue);
// Set these values in the state.
setState((prev) => ({
address: address ? address : "",
area: area ? area : "",
city: city ? city : "",
state: state ? state : "",
markerPosition: {
lat: latValue,
lng: lngValue
},
mapPosition: {
lat: latValue,
lng: lngValue
}
}));
},
[getArea, getCity, getState]
);
const AsyncMap = withScriptjs(
withGoogleMap((props) => {
console.log(props);
return (
<GoogleMap
defaultZoom={state.zoom}
defaultCenter={{
lat: state.markerPosition.lat,
lng: state.markerPosition.lng
}}
>
{/*Marker*/}
<Marker
google={window.google}
name={"Dolores park"}
draggable={true}
onDragEnd={onMarkerDragEnd}
position={{
lat: state.markerPosition.lat,
lng: state.markerPosition.lng
}}
/>
<InfoWindow
onClose={onInfoWindowClose}
position={{
lat: state.markerPosition.lat,
lng: state.markerPosition.lng
}}
>
<div>
<span style={{ padding: 0, margin: 0 }}>{state.address}</span>
</div>
</InfoWindow>
<Marker />
{/* <MarkerWithLabel
position={{ lat: -34.397, lng: 150.644 }}
labelAnchor={new google.maps.Point(0, 0)}
labelStyle={{ backgroundColor: "yellow", fontSize: "32px", padding: "16px" }}
>
<div>Hello There!</div>
</MarkerWithLabel> */}
{/* For Auto complete Search Box */}
<Autocomplete
style={{
width: "100%",
height: "40px",
paddingLeft: "16px",
marginTop: "2px",
marginBottom: "2rem"
}}
onPlaceSelected={onPlaceSelected}
types={["(regions)"]}
/>
</GoogleMap>
);
})
);
useEffect(() => {
let _isMounted = true;
function fetchLocation() {
try {
Geocode.fromLatLng(state.mapPosition.lat, state.mapPosition.lng).then(
(response) => {
const address = response.results[0].formatted_address,
addressArray = response.results[0].address_components,
city = getCity(addressArray),
state = getState(addressArray),
area = getArea(addressArray);
setState((prev) => ({
...prev,
address: address ? address : "",
city: city ? city : "",
area: area ? area : ""
}));
}
);
} catch (e) {
console.error(e);
}
}
fetchLocation();
return () => {
_isMounted = false;
};
}, [getArea, getCity, getState]);

return (
<div style={{ padding: "1rem", margin: "0 auto", maxWidth: 1000 }}>
<h1>Campus Guide Routes</h1>
<Card bordered>
<Card.Text label="City">{state.city}</Card.Text>
<Card.Text label="Area">{state.area}</Card.Text>
<Card.Text label="State">{state.state}</Card.Text>
<Card.Text label="Address">{state.address}</Card.Text>
</Card>
<AsyncMap
googleMapURL="https://maps.googleapis.com/maps/api/js?key=googleApiKeyHere&libraries=places"
loadingElement={<div style={{ width: "100%", height: `100%` }} />}
containerElement={
<div style={{ width: "100%", height: state.height }} />
}
mapElement={<div style={{ width: "100%", height: `100%` }} />}
/>
</div>
);
};
export default LocationSearchModal;

Answer 1

试试这个，

const AsyncMap = withScriptjs(
withGoogleMap((props) => {
return (
<GoogleMap
defaultZoom={state.zoom}
defaultCenter={{
lat: state.markerPosition.lat,
lng: state.markerPosition.lng
}}
id="map-container"
>
.....

将css添加到映射容器

#map-container {
overflow-anchor:none;
}

Answer 2

您有两个标记，因为您在index.js中保留了<React.srictMode></React.srictMode>。