Leaflet Map Tiles 在计算机浏览器上工作，在手机和平​​板电脑屏幕上只显示灰屏

Question

该代码适用于计算机，构建后，我可以毫无问题地浏览我的网站，但是在智能手机和平板电脑上，我看不到任何地图，这很奇怪，因为图标在其位置，但瓷砖只是灰屏，没有从地图显示。 如果您有任何想法，请告诉我，因为我搜索了类似问题的其他答案，但一无所获。 这是我的代码 请忽略样板 React、Gatsby 和 Graphql 代码，我放在这里只是为了显示整个代码。

import React from "react"
import LayoutNoPadding from "../components/layoutNoPadding"
import { Map, Marker, Popup, TileLayer, Tooltip } from 'react-leaflet'
import {Icon} from 'leaflet'
import {graphql} from 'gatsby'
import AniLink from "gatsby-plugin-transition-link/AniLink"
import SEO from '../components/SEO'
import Img from 'gatsby-image'
import AllSearch from '../components/search/AllSearch'


const IndexPage = ({data}) => {
  const {allStrapiGenomes:{nodes:genomes}} = data
  
  return (
  <LayoutNoPadding>
    <SEO title="WWB" />
    <AllSearch />
    <div className="relative">
    <div className="mx-10 px-6 absolute left-0 top-0 home-headline my-1">
    <h1 class="sm:text-3xl text-2xl font-medium title-font text-white headline home-headline">Worldwide Bee</h1>
    <p class="text-base leading-relaxed xl:w-full lg:w-full para pb-5 text-white">The Free Honey Bee Encyclopedia</p>
    </div>
    </div>
    {typeof window !== 'undefined' &&
        <Map center={[0, 0]} 
            zoom={2} maxZoom={5}
            minZoom={2} 
            attributionControl={false} 
            tap={false} 
            scrollWheelZoom={false} 
            dragging={false} 
        >
                <TileLayer
                url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png"
                 />
                {genomes.map((genome)=> {
                  return (
                    <div className="bee-icons">
                    <Marker
                      position={[`${genome.coordinate_x}`,`${genome.coordinate_y}`]}
                      icon = { new Icon({
                        iconUrl: genome.bee_icon.childImageSharp.fluid.src,
                        iconSize: [60],
                        iconAnchor: [20, 40]
                      })}
                    >
                      <Tooltip>{genome.bee_name}</Tooltip>
                      <Popup>
                        <Img fluid={genome.bee_icon.childImageSharp.fluid} alt={genome.bee_name} />
                        <h1 className="text-xl py-2">{genome.bee_name}</h1>
                        <h1 className="text-lg text-gray-500">{genome.bee_genome}</h1>
                        <p className="text-sm text-gray-700 pb-2">{genome.summary}</p>
                        <AniLink fade to={`/genomes/${genome.slug}`} className="flex bg-gray-200 py-2 px-4 focus:outline-none text-lg cursor-pointer text-white rounded-full justify-center text-white hover:bg-gray-300 transition-all duration-500 ease-in-out">Read More</AniLink>
                      </Popup>
                    </Marker>
                </div>
                  )
                })}
        </Map>
  }
  </LayoutNoPadding>
  )
}
export default IndexPage

export const query = graphql`
  {
    allStrapiGenomes {
      nodes {
        bee_icon {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        bee_genome
        coordinate_x
        coordinate_y
        summary
        strapiId
        bee_photo {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        bee_name
        content
        slug
        }
      }
    }
`

Answer 1

问题是 url 中的{r} 。 它代表retina 。

用@2x替换它或完全删除它。

瓷砖层文档