我想在我的 React 專案中使用傳單地圖，并且我想添加一個圖層控制元件，用戶可以在其中在街景視圖和衛星視圖之間切換。我正在嘗試使用 google 衛星視圖，但它似乎不起作用。
這是我的代碼
function App() {
return (
<div className="App">
<MapContainer center={[40.44695, -345.23437]} zoom={2}>
<LayersControl>
<BaseLayer checked name="OpenStreetMap">
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
/>
</BaseLayer>
<BaseLayer name="Satellite View">
<TileLayer
url='https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'
maxZoom= {20}
/>
</BaseLayer>
</LayersControl>
</MapContainer>
</div>
);
}
export default App;
衛星視圖
非常感謝
uj5u.com熱心網友回復：
您用于 Google 地圖的圖塊網址不存在：
https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}
從傳單檔案：
{s} 表示可用的子域之一（按順序用于幫助處理每個域限制的瀏覽器并行請求；子域值在選項中指定；默認情況下 a、b 或 c，可以省略），{z} — 縮放級別，{ x} 和 {y} — 瓷磚坐標。{r} 可用于將“@2x”添加到 URL 以加載視網膜圖塊。
您請求的 url 正在使用默認的 subdomains a，b并且c都顯示已損壞：
- https://a.google.com/vt/lyrs=s&x=1&y=1&z=1
- https://b.google.com/vt/lyrs=s&x=1&y=1&z=1
- https://c.google.com/vt/lyrs=s&x=1&y=1&z=1
看起來正確的子域是mt1,mt2和mt3。您可以使用subdomainsprop指定它們：
<TileLayer
url='https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'
maxZoom= {20}
subdomains={['mt1','mt2','mt3']}
/>
https://mt1.google.com/vt/lyrs=s&x=1&y=1&z=1
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/316014.html
標籤：javascript 反应 字典 传单 反应传单