###前提・実現したいこと
react-leaflet(https://github.com/PaulLeCam/react-leaflet)を使ってマーカーの上にポップアップを画面が表示された時に表示させたいのですが、そのやり方が分からなく、詰まっています。
以下のコードはマップにマーカーが表示され、そのマーカーをクリックするとポップアップ「現在地」と表示されます。
###該当のソースコード
TypeScript
1 render() { 2 let cuLat = this.state.currentLocation.currentLat; 3 let cuLon = this.state.currentLocation.currentLon; 4 var pinIcon = L.icon({ 5 iconUrl: 'images/marker-red.png', 6 iconSize: [25, 41], 7 iconAnchor: [13,35], 8 popupAnchor: [0, -30] 9 }); 10 const marker = this.state.hasLocation ? ( 11 <Marker position={this.state.latlng} icon={pinIcon}> 12 <Popup> 13 <span> 14 Let's go there 15 </span> 16 </Popup> 17 </Marker> 18 ) : null 19 <Map 20 ref="map" 21 center={[cuLat,cuLon]} 22 zoom={14} 23 onClick={this.handleClick}> 24 <TileLayer 25 url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' 26 attribution='© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors' 27 /> 28 <Marker position={[cuLat, cuLon]} draggable={false}> 29 <Popup> 30 <span> 31 Current here 32 </span> 33 </Popup> 34 </Marker> 35 {marker} 36 </Map> 37}
あなたの回答
tips
プレビュー