React-Leaflet集成Google Map仅部分加载问题求助

问题核心原因 #

你的代码存在两个关键问题：

1. 谷歌地图瓦片URL的API密钥参数格式错误
2. 未引入Leaflet的基础样式文件，导致瓦片布局错乱

修复方案 #

1. 修正API密钥传递格式并引入Leaflet CSS #

直接修改代码，调整URL参数并添加样式依赖：

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
// 必须引入Leaflet原生样式，否则会出现瓦片错位、部分加载异常
import 'leaflet/dist/leaflet.css';

const center = [41.015137, 28.97953];

function App() {
  return (
    <MapContainer
      center={center}
      zoom={13}
      style={{ height: "500px", width: "100%" }}
    >
      <TileLayer
        // 修正API密钥参数格式，添加key=前缀
        url={`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&hl=en&gl=US&key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`}
        subdomains={["mt0", "mt1", "mt2", "mt3"]}
        attribution='© Google Maps'
      />
      <Marker position={center}>
        <Popup>A sample marker on the map.</Popup>
      </Marker>
    </MapContainer>
  );
}

export default App;

2. 额外验证项 #

• 确认你的API密钥已启用Maps Static API服务：@react-google-maps/api依赖的是Maps JavaScript API，而瓦片服务需要单独启用Maps Static API
• 可根据需求调整lyrs参数切换图层类型：m为普通地图、s为卫星图、h为混合图、p为地形图

内容的提问来源于stack exchange，提问作者Raw Anger