Node.js - Реакция: Как правильно расположить комбинированный список в GoogleMap - PullRequest
Новая
       4

Node.js - Реакция: Как правильно расположить комбинированный список в GoogleMap

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

Я пытаюсь расположить 2 comboboxes на моем Google-map, но по некоторым причинам я продолжаю видеть их в середине карты, как показано ниже:

wrong

ожидаемый результат , который я пытаюсь достичь, - это следующий результат с comboboxes в левом верхнем углу карты:

correct

Ниже фрагмента кода Я использую: 

import React from 'react';
import styled from 'styled-components';
import { Table } from 'reactstrap';
import GoogleMapReact from 'google-map-react';
import { Card, CardImg, CardText, CardBody, CardTitle, /*CardSubtitle,*/ Button } from 'reactstrap';

const MapContainer = styled.div`
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 200px;
    grid-gap: 10px;
    height: 100vh;
    grid-template-areas: "google-map   sidebar" "ship-tracker sidebar";

    .google-map {
        background: #424242;
        grid-area: google-map;
    }
    .map-sidebar {
        background: #9dc183;
        grid-area: sidebar;
    }
    .ship-tracker {
        grid-area: ship-tracker;
    }
`;

const BoatMap = () => (
    <div className="google-map">
        <GoogleMapReact
            bootstrapURLKeys={{ key: 'My_Key' }}
            center={{
                lat: 42.4,
                lng: -71.1
            }}
            zoom={11}
        >
            {/* Insert components here */}
            <select>
                <option value="All">All</option>
                <option value="Marker-1">Marker-1</option>
                <option value="Marker-2">Marker-2</option>
                <option value="Marker-3">Marker-3</option>
            </select>

            <select>
                <option value="All">All</option>
                <option value="Marker-A">Marker-A</option>
                <option value="Marker-B">Marker-B</option>
            </select>
        </GoogleMapReact>
    </div>
);

То, что я пробовал до сих пор:

Из официальной документации объясняется, как компоненты должны быть расположены, если используя модуль 'google-map-реакции'. Я точно следовал руководству, но мои comboboxes все еще в центре. Теперь из той же документации предоставлен следующий фрагмент кода, который полезен для добавления компонентов: 

<GoogleMapReact
    bootstrapURLKeys={{ key: [YOUR_KEY] }}
    zoom={zoom}
    center={center}
    heatmapLibrary={true}
    heatmap={{data}}
  >
    {markers}
  </GoogleMapReact>

Однако в моем случае это не работает и comboboxes находятся в центре. Что мне не хватает? Это потому, что по умолчанию comboboxes центрированы, и я должен вручную ввести позицию? Спасибо за указание в правильном направлении.

...