2016-08-12 6 views
2

私は反応リーフレットを使用しており、市場が出現することがあります。ちょうど働いていない。反応リーフレットのポップアップが機能しない、マウスオーバーでカーソルが変化しない

私は単純にサンプルコードをコピーしました。他のパッケージと競合することはありますか?それとも、私はリーフレットの特定のバージョンが必要ですか?

私のカーソルはマウスオーバーマップで変更されません。

マップとマーカーが正しく表示されるように正しい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')); 

答えて

2

インデックスファイルを確認し、リーフレットのCSSファイル/ 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

+0

答えとして、これはあなたの問題を解決した場合にマークしてください。 –

+1

はい!ありがとうございました!私はバージョン1.0を持っていた – interpolated

関連する問題