React leaflet not rendering properly

react-leaflet map無法正確呈現。React leaflet not rendering properly

地圖是其父的邊界
地圖上的一些瓦片的渲染之外缺少

使用標準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;

來源

2016-10-18 Peter Gerhat

的主要問題是，CSS沒有被引進，並沒有設置地圖部件的高度。

然後我用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;

來源

2016-10-18 09:24:41

還添加這些傳單的CSS和JS文件到您的項目

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

同時添加高度到地圖固定與缺少標記圖像的問題。這是強制性的。

簡單JsFiddle P.S.查看外部資源。

來源

2017-09-26 07:06:58 Vikky

React leaflet not rendering properly

回答

相關問題