React-Leaflet начало работы - PullRequest
Новая
       31

React-Leaflet начало работы

0 голосов
/ 13 декабря 2018

Это должно выглядеть так?

Я следовал https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/simple.js и быстрый старт на главной странице.

Sucky map

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "leaflet": "^1.3.4",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-leaflet": "^2.1.2",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Ответы [ 2 ]

0 голосов
/ 03 июля 2019

Глядя на документы "Reaction-leaflet", он гласит следующее:

Вам необходимо добавить его CSS на страницу, чтобы правильно отобразить карту, и установить высотуконтейнер (полный текст: https://react -leaflet.js.org / docs / en / setup.html # docsNav )

Вы можете попытаться установить ширину и высотуэлемент Map (например, мне нужна ширина как 100% родительского контейнера и фиксированная высота 450px): 

<Map center={position} zoom={this.state.zoom} style={{width: '100%', height: 450}}>
...

Это даст вам окно с параметрами масштабирования, но вы не увидитеСама карта, так как вам не хватает стилей карты, поэтому вам нужно ее импортировать: 

@import '~leaflet/dist/leaflet.css';

Вы также можете добавить CSS в свой HTML: 

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
0 голосов
/ 13 декабря 2018

Отсутствует листовка CSS и / или ширина и высота контейнера карты.

Или вам может понадобиться использовать map.invalidateSize(), поскольку размер вашего контейнера изменился, при этом карта обновится в соответствии с новым размером контейнера.

...