如何在React Native(Expo)物理设备上无API密钥渲染地图？

以下是几个无需API密钥、仅用于显示地图的简便实现方案：

1. Leaflet + 离线瓦片地图 #

Leaflet是轻量地图库，本身不要求API密钥，只要你有本地的地图瓦片文件（可从OpenStreetMap等源下载特定区域的瓦片），就能直接渲染地图。

实现代码（HTML）： #

<!DOCTYPE html>
<html>
<head>
    <!-- 引入本地的Leaflet资源（建议下载到本地，避免网络依赖） -->
    <link rel="stylesheet" href="leaflet.css">
    <script src="leaflet.js"></script>
    <style>
        #map { height: 400px; width: 600px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // 初始化地图，设置中心坐标和缩放级别
        var map = L.map('map').setView([51.505, -0.09], 13);
        
        // 加载本地瓦片（假设瓦片存放在tiles/{z}/{x}/{y}.png路径下）
        L.tileLayer('tiles/{z}/{x}/{y}.png', {
            attribution: 'Map data © OpenStreetMap contributors'
        }).addTo(map);
    </script>
</body>
</html>

步骤说明： #

• 下载Leaflet的CSS和JS文件到本地项目
• 用Mobile Atlas Creator等工具批量下载OpenStreetMap目标区域的瓦片
• 按z(缩放级别)/x(横向坐标)/y(纵向坐标)的目录结构存放瓦片

2. 嵌入OpenStreetMap导出的静态图片（本地版） #

直接从OpenStreetMap官网导出目标区域的静态图片，保存为本地文件后嵌入页面，无任何网络依赖和密钥要求。

实现代码（HTML）： #

<!DOCTYPE html>
<html>
<body>
    <!-- 使用本地保存的导出图片 -->
    <img src="exported-osm-map.png" 
         width="600" 
         height="400" 
         alt="Static map">
</body>
</html>

步骤说明： #

• 打开OpenStreetMap官网，定位到目标区域
• 点击「导出」按钮，选择区域范围后下载图片
• 将图片保存到项目目录，直接用img标签引用

3. 本地静态地图图片（最简方案） #

如果仅需显示固定区域的地图，直接使用提前截取的地图图片（比如从地图网站截图后保存为本地文件），无需任何地图库：

实现代码（HTML）： #

<!DOCTYPE html>
<html>
<body>
    <img src="local-map-image.png" alt="Local map" style="width: 600px; height: 400px;">
</body>
</html>

这个方案完全无依赖，适合仅需固定显示某区域地图的场景。

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