Блог

Главная - Вопросы по программированию - React-admin: как встроить листовку в режим редактирования / создания, для визуальной проверки адреса

React-admin: как встроить листовку в режим редактирования / создания, для визуальной проверки адреса

#leaflet #react-admin #react-leaflet

#листовка #react-admin #react-листовка

Вопрос:

У меня есть список пользователей и адресов.

В режиме редактирования / создания React-admin пользователь может захотеть ввести адрес / город / почтовый индекс и захотеть увидеть openstreetmap этого местоположения.

Как внедрить листовку openstreetmap в режим редактирования / крита и связать ее с полями адресов? Есть ли образец / блог / github, который показывает пример?

 export const PersonEdit = props => (
    <Edit title={<PersonTitle />} {...props}>
        <SimpleForm>
            <TextInput disabled source="id" />
            <TextInput source="firstName" />
            <TextInput source="lastName" />
            <TextInput source="email" />
            <TextInput source="phone1" />
            <TextInput source="phone2" />
            <TextField label="Num" source="address.streetNum" />
            <TextField label="Street" source="address.streetName" />
            <TextField label="Pcode" source="address.postalCode" />
            <XrefAccountsField label="Xref Tags" source="xrefs" />
            <DateTimeInput disabled source="createTime" />
            <DateTimeInput disabled source="updateTime" />

            <MapContainer  center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
               <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
               <Marker position={[51.505, -0.09]}>
                 <Popup>
                   A pretty CSS3 popup. <br /> Easily customizable.
                 </Popup>
               </Marker>
             </MapContainer>

        </SimpleForm>

    </Edit>
);

введите описание изображения здесь

Комментарии:

1. Сначала добавьте в index.css следующее: .leaflet-container { высота: 750 пикселей; ширина: 100%; поле: 0 авто; }

2. Добавление этой строки в index.css не изменило макет. (скриншот обновлен в вопросе)

3. Да, вы правы, это еще не все, вам еще нужно подключить leaflet.css в разделе head index.html leafletjs.com/examples/quick-start Я скачал его и подключил локально: <link rel=»таблица стилей» href=»%PUBLIC_URL%/leaflet.css»/>

4. Спасибо, leaflet.css действительно помог. Содержимое карты правильное, но размещено в одном углу — скриншот обновлен. Вероятно, мне не хватает какого-то аспекта в способе компоновки / изменения размеров с помощью react-admin в режиме редактирования / создания.

5. Я не использовал формы редактирования / создания, а создал свою собственную форму на основе карточки material-ui и поместил карту внутри CardMedia.

Ответ №1:

Вы можете упростить ее расположение с помощью пользовательского макета формы, используя <FormWithRedirect /> компонент [проверьте здесь]. Таким образом, вы также можете распределить остальные входные данные в несколько строк вместо одного столбца.

Ответ №2:

Добавить в index.css

 .leaflet-container { height: 450px; width: 100%; margin: 0  }

Добавьте параметр fullWidth в MapContainer

 
export const PersonEdit = props => (
   ...

            <MapContainer  center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} fullWidth>
               <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
               <Marker position={[51.505, -0.09]}>
                 <Popup>
                   A pretty CSS3 popup. <br /> Easily customizable.
                 </Popup>
               </Marker>
             </MapContainer>

        </SimpleForm>
    </Edit>
);

введите описание изображения здесь