Question

当我尝试在使用'create-react-app'制作的React应用中创建简单的地图组件时，我遇到了'react-leaflet'库的麻烦库，没有打字稿，也没有流程。

下一个代码是使用'react-leaflet'和简单的html和node_modules的简单地图组件，我无法在'create-react-app'中复制它strong>项目。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React-Leaflet UMD example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
    <script src="/node_modules/react-leaflet/dist/react-leaflet.min.js"></script>
    <style>
      body {
        padding: 20px;
      }
      .leaflet-container {
        height: 400px;
        width: 80%;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/babel" data-presets="es2015,react">
    const React = window.React
const { Map: LeafletMap, TileLayer, Marker, Popup } = window.ReactLeaflet
const position = [51.505, -0.09]
const Example = () => (
  <LeafletMap center={position} zoom={13}>
    <TileLayer
      attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={position}>
      <Popup>
        <span>
          A pretty CSS3 popup. <br /> Easily customizable.
        </span>
      </Popup>
    </Marker>
  </LeafletMap>
)
window.ReactDOM.render(<Example />, document.getElementById('container'))
</script>
  </body>
</html>

谢谢。

Answer 1

这种（也许）应该是在这样的模块化和结构化项目中显示react-leaflet映射组件的正确方法。

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';

class App extends Component {

  render() {

    return (

      <div className="map">
        <Map center={[51.505, -0.09]} zoom={13} className="map__reactleaflet">
          <TileLayer
            url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
            attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
          />
        </Map>
      </div>

    )

  }

}

export default App;

'TileLayer'是绝对可选的，您不需要此组件即可渲染地图，但是必须在其上显示图块，这意味着您可以使用标记，线条，多边形甚至什么都不用的绳索来渲染画布，您只需要从'react-leaflet'库
中导入该组件

如果您找到其他更好的解决方案，请分享，谢谢！

在使用“ create-react-app”制作的react应用中，使用“ react-leaflet”库的正确方法是什么？

1 个答案: