Блог

 import React, { useRef, useEffect, useState } from 'react'
import { gsap, Power3 } from 'gsap'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import 'mapbox-gl/dist/mapbox-gl.css'


const ResturentMapOpenDates = (props) => {
    //Close Map model
    const tl = gsap.globalTimeline
    var store_longitude = props.store_longitude
    var store_latitude = props.store_latitude
    var lon_lan = [store_longitude, store_latitude]


    const closemapmodel = () => {
        var full_map_box = document.querySelector('.map_box_open_full');
        var map_box = document.querySelector('.map_open_date');

        tl.to(full_map_box, .3, {visibility: 'hidden', opacity: 0})
          .to(map_box, .2, {visibility: 'hidden', opacity: 0})
    }

    return (
        <>
          <div className="map_box_open_full" onClick={closemapmodel}></div>

          <div className="map_open_date">
              <div id="res_location_map">
                  <div className="map-container">
                    <MapContainer 
                        center={[store_longitude, -0.09]} 
                        zoom={18} 
                        scrollWheelZoom={true}                  
                    >
                        <TileLayer
                            attribution='amp;copy; <a href="http://osm.org/copyright"></a>'
                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        />
                        <Marker position={[51.505, -0.09]}>
                            <Popup>{props.returent_name}</Popup>
                        </Marker>
                    </MapContainer>
                </div>
              </div>
          </div>
        </>
    )
}

export default ResturentMapOpenDates
 

Я не могу использовать переменную store_longitude. Это всегда дает неопределенное. Поскольку это неопределенная листовка, js не может отобразить карту.

Я изучаю react, и я новичок в этом, я пытаюсь составить карту с помощью инструмента листовки react. Дело в том, что когда я выбираю конкретную страну, я хочу, чтобы она отправилась в выбранную страну, но она выдает ошибку «Ошибка: Недопустимый объект LatLng: (54, не определен)», было бы полезно, если бы вы могли дать мне решение проблемы, я немного запутан, большое вам спасибо.