Как установить InfoBox за маркером - Реагировать на Google Maps - PullRequest
Новая
       30

Как установить InfoBox за маркером - Реагировать на Google Maps

0 голосов
/ 29 января 2020

Проблема - В настоящее время я использую response- 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),
}

Любая помощь будет высоко ценится!

1 Ответ

0 голосов
/ 30 января 2020

Исправлено путем обновления до более новой версии @act-google-maps / api. Вы можете найти его здесь: https://react-google-maps-api-docs.netlify.com/

...