亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

SVG(使用 React Simple Maps)不顯示在移動設備上

SVG(使用 React Simple Maps)不顯示在移動設備上

墨色風雨 2023-05-25 16:40:21
我目前正在構建一個 React 應用程序,其中包含一個使用React Simple Maps構建的交互式 SVG 地圖。在我的桌面瀏覽器中,一切都按預期工作,但是地圖本身不會加載到移動設備上(我已經測試了幾個)而且我不明白為什么。我在下面包含了相關組件的代碼(我刪除了代碼中一些不相關的部分):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? ? ? ? ? ? ? ? >? ? ? ? ?? ? ? ? ? ? ? ? ? ? <>?如果有人可能有任何見解,那將是太棒了!如果您想查看更多代碼/屏幕截圖等,請告訴我。謝謝!javascript反應反應本機svg地圖
查看完整描述

1 回答

?
慕工程0101907

TA貢獻1887條經驗 獲得超5個贊

style={{width: "100%"}}- 通過添加to的屬性<ComposableMap>,問題現在似乎已解決!這不應該替換width="1200"屬性(如果你刪除這個地圖將不會在移動或桌面上呈現),但應該是除了它:

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



查看完整回答
反對 回復 2023-05-25
  • 1 回答
  • 0 關注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號