React Native Maps iOS端点击标记不显示路线工具栏如何解决

React Native Maps 指定 Google 作为地图服务商时，Android 端默认开启标记点击后的路线工具栏，iOS 端存在几个默认限制导致工具栏不显示：

• iOS 端 Google Maps SDK 的路线工具栏默认处于关闭状态，部分场景下组件未默认开启对应配置
• 自定义视图的 Marker 如果缺少必要属性，会拦截默认的信息窗口渲染逻辑，无法触发工具栏展示
• 组件的toolbarEnabled属性在 iOS 端默认值为false，Android 端默认值为true

方案1：开启组件内置配置（优先使用，无需改动原生代码） #

直接给MapView和Marker补全缺失属性即可：

1. 给MapView添加toolbarEnabled={true}属性，强制开启两端的路线工具栏
2. 给Marker补全description属性，iOS 端 Google Maps 只有标记同时存在标题和描述时，才会渲染完整的信息窗口和路线按钮
3. 给自定义 Marker 添加tracksViewChanges={false}，避免自定义视图阻塞默认点击交互
   修改后的完整代码参考：

<MapView 
    style={{ flex: 1 }}
    initialRegion={{
        latitude: lat,
        longitude: lon,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
    }}
    minZoomLevel={16}
    provider='google'
    toolbarEnabled={true}
>
    <MapView.Marker 
        coordinate={{
            latitude: lat,
            longitude: lon
        }}
        title={address}
        description="导航到该地点"
        tracksViewChanges={false}
    >
        <Image resizeMode={'contain'} source={{ uri: markerIconUrl }} style={{width: 32, height: 32}} />
    </MapView.Marker>
</MapView>

改完后重新编译iOS项目即可生效，JS热更新不会触发原生配置变更。

方案2：原生端配置全局开启 #

如果方案1不生效，需要在iOS原生代码中开启Google Maps SDK的对应配置：

1. 打开iOS项目下的AppDelegate.mm（老OC项目为AppDelegate.m）文件
2. 在初始化Google Maps API Key的代码段后，添加全局UI配置：

[GMSServices provideAPIKey:@"你的Google Maps API Key"];
// 开启标记点击后的路线导航入口
GMSMapView *mapView = [GMSMapView sharedInstance];
mapView.settings.allowPOIDirections = YES;

3. 进入iOS目录执行pod install，重新编译项目即可。

方案3：自定义信息窗口实现路线能力（兼容性最好） #

如果以上方案都存在兼容问题，可以直接自定义信息窗口实现路线跳转，完全不依赖SDK内置工具栏：

1. 给Marker添加自定义Callout信息窗口
2. 在窗口内添加路线按钮，点击后通过Linking唤起Google Maps或者系统地图完成路线规划
   示例代码：

import { Linking, View, Text } from 'react-native';

const handleOpenDirections = () => {
  // 优先唤起Google Maps App
  const appUrl = `comgooglemaps://?daddr=${lat},${lon}&directionsmode=driving`;
  Linking.canOpenURL(appUrl).then(supported => {
    if (supported) {
      return Linking.openURL(appUrl);
    }
    // 未安装App则打开网页版Google Maps路线页
    return Linking.openURL(`https://www.google.com/maps/dir/?api=1&destination=${lat},${lon}`);
  });
};

// MapView内Marker写法
<MapView.Marker 
  coordinate={{latitude: lat, longitude: lon}}
  title={address}
>
  <Image resizeMode={'contain'} source={{ uri: markerIconUrl }} style={{width: 32, height: 32}} />
  <MapView.Callout onPress={handleOpenDirections}>
    <View style={{padding: 8, minWidth: 120}}>
      <Text style={{fontWeight: '600'}}>{address}</Text>
      <Text style={{color: '#1A73E8', marginTop: 4}}>点击导航到这里</Text>
    </View>
  </MapView.Callout>
</MapView.Marker>

• 如果给Marker绑定了自定义onPress事件，不要调用事件对象的stopPropagation()方法，否则会阻止默认信息窗口弹出
• react-native-maps版本低于0.29.0时，iOS端对toolbarEnabled属性支持存在已知bug，建议升级到稳定版再调试
• 所有涉及原生配置、依赖变更的修改，都需要重新编译iOS项目，JS热更新无法生效

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