Блог

Здравствуйте (впервые публикуюсь на Stack Overflow, поэтому приношу извинения за любые нарушения этикета …)

В настоящее время я создаю приложение React, которое содержит интерактивную SVG-карту, созданную с использованием React Simple Maps. В моем настольном браузере все работает так, как ожидалось, однако сама карта не загружается на мобильные устройства (я протестировал несколько), и я не могу понять, почему. Я включил код из рассматриваемого компонента ниже (я удалил некоторые нерелевантные части кода):

 import React, { memo, Component } from 'react';
import { ZoomableGroup, ComposableMap, Geographies, Geography } from "react-simple-maps";
import geoUrl from "../data/topo.json";
import Country from './Country'
import { CSSTransition, SwitchTransition } from "react-transition-group";

class Map extends Component { 

    constructor(props){
        super(props);

        this.state = {
            country: "",
            dish: "",
            description: "",
            photo: "",
            recipe: "",
            selected: false,
        }

        this.handleBack = this.handleBack.bind(this);
        this.handleAbout = this.handleAbout.bind(this);
        this.handleList = this.handleList.bind(this);
    }

    handleEnter(country, dish, description, photo, recipe){
        this.setState({
            country: country,
            dish: dish,
            description: description,
            photo: photo,
            recipe: recipe
        })
    }
    
    render(){ 
    
        const { country, dish, description, photo, recipe, selected } = this.state;
        const countries = geoUrl.objects.ne_50m_admin_0_countries.geometries;

        return(
            <SwitchTransition>
                <CSSTransition
                    classNames="transition"
                    transitionAppearTimeout={50000}
                    key={ selected }
                    in={ selected }
                    unmountOnExit
                    appear
                >         
                    <> 
                        <section className="map">
                            <div className="container">
                                <ComposableMap width="1200" data-tip="" projectionConfig={{ scale: 200 }} >
                                    <ZoomableGroup>
                                        <Geographies geography={geoUrl}>
                                            {({ geographies }) =>
                                                geographies.map(geo =>
                                                    <a href="#country">
                                                        <Geography 
                                                            key={geo.rsmKey} 
                                                            geography={geo}
                                                            onMouseEnter={() => {
                                                                const { NAME } = geo.properties;
                                                                this.props.setTooltipContent(`${NAME}`);
                                                            }}
                                                            onMouseLeave={() => {
                                                                this.props.setTooltipContent("");
                                                            }}
                                                            onClick={() => {
                                                                const { NAME, DISH, DESCRIPTION, PHOTO, RECIPE } = geo.properties;
                                                                this.handleEnter(NAME, DISH, DESCRIPTION, PHOTO, RECIPE);
                                                            }}
                                                            fill="#44BBA4"
                                                            stroke="#E94F37"
                                                            strokeWidth="0.5"
                                                            style={{
                                                                default: {
                                                                    outline: 'none'
                                                                },
                                                                hover: {
                                                                    fill: "#E94F37",
                                                                    outline: 'none'
                                                                },
                                                                pressed: {
                                                                    outline: 'none'
                                                                }
                                                            }}
                                                        />
                                                    </a>
                                                )
                                            }
                                        </Geographies>
                                    </ZoomableGroup>
                                </ComposableMap>
                            </div>
                        </section>
                    </>
                </CSSTransition>
            </SwitchTransition>
        );
    }
}

export default memo(Map);
  

Если у кого-нибудь могут быть какие-либо идеи, это было бы фантастически! Пожалуйста, дайте мне знать, если вы хотите увидеть больше кода / скриншотов и т.д. Спасибо!

Спасибо @Maitham за помощь в уточнении ответа — добавив свойство style={{width: "100%"}} to <ComposableMap> , проблема теперь, похоже, решена! Это НЕ ДОЛЖНО заменять width="1200" свойство (если вы удалите его, карта вообще не будет отображаться на мобильных устройствах или на рабочем столе), но должно быть дополнением к нему:

 <ComposableMap width="1200" style={{ width: "100%" }} data-tip="" projectionConfig={{ scale: 200 }} >