如何在 Marker 后面设置 InfoBox - React Google Maps
How to set InfoBox behind Marker - React Google Maps
问题 - 我目前正在使用 react-google-maps 并且有多个标记
onClick 以显示特定的信息框。我将信息框的窗格设置为 'mapPane',这应该将信息框放在标记后面,但它仍然在标记上方。我什至将窗格更改为
'overlayLayer' 并操纵了标记和信息框的 zIndex,但这没有帮助。有帮助吗?
代码
const Map = withScriptjs(
withGoogleMap((props) => {
const [selectedUser, setSelectedUser] = useState(null)
const handleClick = (user) => {
const setUser = user === selectedUser ? null : user
setSelectedUser(setUser)
}
return (
<GoogleMap
defaultZoom={15}
defaultCenter={{ lat: 33.8467822, lng: -84.3715043 }}
defaultOptions={{
mapTypeControl: false,
streetViewControl: false,
}}
>
{dummyData.map((user, key) => {
return (
<Marker
key={key}
position={{
lat: user.coordinates.lat,
lng: user.coordinates.long,
}}
onClick={() => {
handleClick(user)
}}
icon={userIcon}
optimized={false}
>
{selectedUser && selectedUser === user && (
<InfoBox
options={{
pane: 'mapPane',
pixelOffset: new window.google.maps.Size(-130, 25),
boxStyle: {
width: '150px',
},
closeBoxURL: ``,
}}
>
<div
style={{
backgroundColor: '#02AFE1',
color: 'white',
width: '150px',
minHeight: '50px',
padding: 15,
opacity: 0.5,
borderRadius: 10,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
fontFamily: 'montserrat',
}}
>
<div
style={{
fontSize: 16,
fontWeight: 500,
padding: 1,
textAlign: 'center',
}}
>
{selectedUser.name}
</div>
<div style={{ padding: 1 }}>{selectedUser.location}</div>
<div style={{ padding: 1 }}>{selectedUser.status}</div>
</div>
</InfoBox>
)}
</Marker>
)
})}
</GoogleMap>
)
})
)
Map.defaultProps = {
googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GMAP_API}&v=3.exp&libraries=geometry,drawing,places`,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `800px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}
const dummyData = [
{
id: 1,
name: 'Walter White',
location: 'GPS Location',
status: 'Late',
coordinates: { lat: 33.8587822, long: -84.3755043 },
},
{
id: 2,
name: 'Walter Whitman',
location: 'GPS Location',
status: 'On Time',
coordinates: { lat: 33.8487822, long: -84.3785043 },
},
{
id: 3,
name: 'Ken Dodds',
location: 'GPS Location',
status: 'On Time',
coordinates: { lat: 33.8427822, long: -84.3765043 },
},
{
id: 4,
name: 'Jordan Walke',
location: 'GPS Location',
status: 'Early',
coordinates: { lat: 33.8490822, long: -84.3765043 },
},
]
markerIcon:
export default {
path:
'M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z',
fillColor: '#014175',
fillOpacity: 1,
scale: 0.075,
strokeColor: '#014175',
scaledSize: new window.google.maps.Size(25, 25),
}
如有任何帮助,我们将不胜感激!
通过更新到更新的@react-google-maps/api 修复了它。您可以在这里找到它:https://react-google-maps-api-docs.netlify.com/
问题 - 我目前正在使用 react-google-maps 并且有多个标记 onClick 以显示特定的信息框。我将信息框的窗格设置为 'mapPane',这应该将信息框放在标记后面,但它仍然在标记上方。我什至将窗格更改为 'overlayLayer' 并操纵了标记和信息框的 zIndex,但这没有帮助。有帮助吗?
代码
const Map = withScriptjs(
withGoogleMap((props) => {
const [selectedUser, setSelectedUser] = useState(null)
const handleClick = (user) => {
const setUser = user === selectedUser ? null : user
setSelectedUser(setUser)
}
return (
<GoogleMap
defaultZoom={15}
defaultCenter={{ lat: 33.8467822, lng: -84.3715043 }}
defaultOptions={{
mapTypeControl: false,
streetViewControl: false,
}}
>
{dummyData.map((user, key) => {
return (
<Marker
key={key}
position={{
lat: user.coordinates.lat,
lng: user.coordinates.long,
}}
onClick={() => {
handleClick(user)
}}
icon={userIcon}
optimized={false}
>
{selectedUser && selectedUser === user && (
<InfoBox
options={{
pane: 'mapPane',
pixelOffset: new window.google.maps.Size(-130, 25),
boxStyle: {
width: '150px',
},
closeBoxURL: ``,
}}
>
<div
style={{
backgroundColor: '#02AFE1',
color: 'white',
width: '150px',
minHeight: '50px',
padding: 15,
opacity: 0.5,
borderRadius: 10,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
fontFamily: 'montserrat',
}}
>
<div
style={{
fontSize: 16,
fontWeight: 500,
padding: 1,
textAlign: 'center',
}}
>
{selectedUser.name}
</div>
<div style={{ padding: 1 }}>{selectedUser.location}</div>
<div style={{ padding: 1 }}>{selectedUser.status}</div>
</div>
</InfoBox>
)}
</Marker>
)
})}
</GoogleMap>
)
})
)
Map.defaultProps = {
googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GMAP_API}&v=3.exp&libraries=geometry,drawing,places`,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `800px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}
const dummyData = [
{
id: 1,
name: 'Walter White',
location: 'GPS Location',
status: 'Late',
coordinates: { lat: 33.8587822, long: -84.3755043 },
},
{
id: 2,
name: 'Walter Whitman',
location: 'GPS Location',
status: 'On Time',
coordinates: { lat: 33.8487822, long: -84.3785043 },
},
{
id: 3,
name: 'Ken Dodds',
location: 'GPS Location',
status: 'On Time',
coordinates: { lat: 33.8427822, long: -84.3765043 },
},
{
id: 4,
name: 'Jordan Walke',
location: 'GPS Location',
status: 'Early',
coordinates: { lat: 33.8490822, long: -84.3765043 },
},
]
markerIcon:
export default {
path:
'M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z',
fillColor: '#014175',
fillOpacity: 1,
scale: 0.075,
strokeColor: '#014175',
scaledSize: new window.google.maps.Size(25, 25),
}
如有任何帮助,我们将不胜感激!
通过更新到更新的@react-google-maps/api 修复了它。您可以在这里找到它:https://react-google-maps-api-docs.netlify.com/