React Native（Expo）中带自定义标记的动态地图实现方案咨询

方案1：使用Expo官方地图库 expo-maps #

这是最适配Expo生态的方案，支持自定义标记、动态地图交互，完全兼容Expo Go，无需原生配置。

• 安装命令：npx expo install expo-maps
• 核心实现示例：

import MapView, { Marker } from 'expo-maps';
import { View } from 'react-native';

export default function MapScreen() {
  const initialRegion = {
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  };

  // 可动态更新的自定义标记数据
  const markers = [
    { id: '1', lat: 37.78825, lng: -122.4324, title: '自定义标记1' },
    { id: '2', lat: 37.7900, lng: -122.4350, title: '自定义标记2' },
  ];

  return (
    <View style={{ flex: 1 }}>
      <MapView
        style={{ flex: 1 }}
        initialRegion={initialRegion}
      >
        {markers.map(marker => (
          <Marker
            key={marker.id}
            coordinate={{ latitude: marker.lat, longitude: marker.lng }}
            title={marker.title}
            // 自定义标记图标（支持本地/网络图片）
            image={require('./assets/custom-marker.png')}
          />
        ))}
      </MapView>
    </View>
  );
}

• 优势：零原生配置、Expo Go直接运行、API简洁，支持地图拖拽、缩放等基础交互，自定义标记灵活。

方案2：保留Expo，通过EAS Build使用@rnmapbox/maps #

如果必须用Mapbox的高级功能（比如自定义地图样式、3D地图），不用放弃Expo，改用EAS Build构建自定义开发客户端即可绕过Expo Go的限制：

1. 安装依赖：npm install @rnmapbox/maps
2. 在app.json中添加Mapbox配置：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "MGLMapboxAccessToken": "你的Mapbox Token"
      }
    },
    "android": {
      "manifest": {
        "application": {
          "meta-data": [
            {
              "name": "MAPBOX_ACCESS_TOKEN",
              "value": "你的Mapbox Token"
            }
          ]
        }
      }
    }
  }
}

3. 构建自定义开发客户端：eas build --profile development --platform ios/android
4. 安装构建后的客户端，即可正常使用@rnmapbox/maps的所有功能，包括自定义标记、动态图层。

• 优势：保留Expo开发流程（无需eject），同时获得Mapbox完整功能；缺点：首次构建耗时稍长。

方案3：优化WebView+Leaflet方案 #

如果想继续低成本原型开发，解决之前的本地文件问题即可：

• 改用CDN加载Leaflet资源，避免本地文件导入：

<!-- 嵌入WebView的HTML内容 -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <style>body { margin: 0; } #map { height: 100vh; }</style>
</head>
<body>
  <div id="map"></div>
  <script>
    const map = L.map('map').setView([37.78825, -122.4324], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    
    // 通过RN与WebView通信接收动态标记数据
    window.addEventListener('message', (event) => {
      const markers = event.data;
      // 清除现有标记
      map.eachLayer(layer => {
        if (layer instanceof L.Marker) map.removeLayer(layer);
      });
      // 添加新标记
      markers.forEach(marker => {
        L.marker([marker.lat, marker.lng])
          .addTo(map)
          .bindPopup(marker.title);
      });
    });
  </script>
</body>
</html>

• RN端通过WebView传递动态标记数据：

import { WebView } from 'react-native-webview';
import { useState, useEffect, useRef } from 'react';

export default function MapScreen() {
  const webViewRef = useRef(null);
  const [markers, setMarkers] = useState([
    { lat: 37.78825, lng: -122.4324, title: '标记1' },
  ]);

  const sendMarkersToWebView = () => {
    const script = `window.postMessage(${JSON.stringify(markers)});`;
    webViewRef.current?.injectJavaScript(script);
  };

  useEffect(() => {
    sendMarkersToWebView();
  }, [markers]);

  return (
    <WebView
      ref={webViewRef}
      source={{ html: '上面的HTML内容字符串' }}
      javaScriptEnabled={true}
    />
  );
}

• 优势：完全无需原生依赖，低成本快速迭代；缺点：性能略逊于原生地图库，复杂交互可能有延迟。

内容的提问来源于stack exchange，提问作者Paulin.f