Реагировать на брошюру не правильно

Question

Карта react-leaflet не отображается должным образом.

• карта оказывается за пределами своего родителя границ
• Некоторых Плитки карты отсутствует

Проблема возникает при использовании карты со стандартными react компонентами.

Мой сайт также использует react-bootstrap. Как я прочитал, это может вызвать некоторые потенциальные проблемы, связанные с тем, как визуализируется react-leaflet.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Map, Marker, Popup, TileLayer } from 'react-leaflet'; 

const position = [37.335556, -122.009167]; 

class MapView extends React.Component { 
    render() { 
     return (
        <div 
        style={{ 
         height:"100%" 
        }}> 
        <Map center={position} zoom={13}> 
         <TileLayer 
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
         /> 
         <Marker position={position}> 
          <Popup> 
          <span>A pretty CSS3 popup.<br/>Easily customizable.</span> 
          </Popup> 
         </Marker> 
         </Map> 
        </div> 
     ); 
    } 
} 

module.exports = MapView; 

Answer 1

Основная проблема заключалась в том, что CSS не импортируется, а высота компонента карты не был установлен.

Затем я исправил проблему с недостающей Marker изображения с помощью react-leaflet-marker-layer

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Map, Marker, Popup, TileLayer } from 'react-leaflet'; 
import MarkerLayer from 'react-leaflet-marker-layer'; 

const position = { lng: -122.673447, lat: 45.522558 }; 
const markers = [ 
    { 
    position: { lng: -122.67344700000, lat: 45.522558100000 }, 
    text: 'Voodoo Doughnut', 
    }, 
    { 
    position: { lng: -122.67814460000, lat: 45.5225512000000 }, 
    text: 'Bailey\'s Taproom', 
    }, 
    { 
    position: { lng: -122.67535700000002, lat: 45.5192743000000 }, 
    text: 'Barista' 
    }, 
    { 
    position: { lng: -122.65596570000001, lat: 45.5199148000001 }, 
    text: 'Base Camp Brewing' 
    } 
]; 

class ExampleMarkerComponent extends React.Component { 

    render() { 
    const style = { 
     border: 'solid 1px lightblue', 
     backgroundColor: '#333333', 
     borderRadius: '50%', 
     marginTop: '-5px', 
     marginLeft: '-5px', 
     width: '10px', 
     height: '10px' 
    }; 

    return (
     <div style={Object.assign({}, this.props.style, style)}></div> 
    ); 
    } 

} 

class MapView extends React.Component { 
    render() { 
     return (
        <div 
        style={{ 
         height:"700px" 
        }}> 
        <Map center={position} zoom={13} 
         style={{ 
          height:"700px" 
         }}> 
         <TileLayer 
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
         /> 
         <MarkerLayer 
          markers={markers} 
          longitudeExtractor={m => m.position.lng} 
          latitudeExtractor={m => m.position.lat} 
          markerComponent={ExampleMarkerComponent} /> 
         </Map> 
        </div> 
     ); 
    } 
} 

module.exports = MapView; 

Answer 2

Кроме того, добавить CSS и JS файлы этой листовки в ваш проект

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" /> 
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script> 

добавить также высоту на карту. это обязательно.

Простой JsFiddle P.S. изучите внешние ресурсы.