react-leaflet 弹出窗口不起作用，光标在鼠标悬停时不会改变

Question

我正在使用react-leaflet，可以让市场出现。只是不工作。

我只是复制了示例代码。会不会和其他包有冲突？或者我需要特定版本的 leaflet、react 和 react-dom 才能工作吗？

鼠标悬停在地图上时我的光标没有改变。

我已经确保我有正确的 css 以便地图和标记正确呈现。

任何帮助将不胜感激，我在这方面还很陌生，所以这可能是一个愚蠢的错误。

import React from 'react';
import ReactDOM from 'react-dom';

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

class SimpleExample extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng]
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            <span>A CSS3 popup. <br /> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}

ReactDOM.render(<SimpleExample />, document.getElementById('root'));

Answer 1

检查您的索引文件，看看传单的 css file/js 文件是 0.7.7 版还是 1.0 版。如果是 1.0，将它们替换为：

https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css

https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js

react-leaflet 弹出窗口不起作用，光标在鼠标悬停时不会改变

react-leaflet popup not working, cursor doesn't change on mouseover

popup

react-leaflet