调用地图/谷歌地图跳转导航未显示街道门牌号该如何解决？

问题根因 #

原有代码逻辑本身没有运行错误，不显示街道门牌号是系统地图唤起协议的参数规则导致的：

• iOS端使用的maps:0,0?q=标签@经纬度格式，会让苹果地图优先展示传入的label文本，不会主动触发经纬度反向解析获取完整门牌号地址
• 安卓端使用的geo:0,0?q=经纬度(标签)格式，大部分场景下谷歌地图/系统内置地图会优先展示括号内的自定义标签，跳过自动拉取地址解析结果的步骤

修复方案 #

你可以调整地图唤起链接的参数规则，也可以提前在本地做一次反向地理编码把门牌号拼入标签，以下是优化后的代码：

const openMaps = async () => {
  const lat = address.latitude;
  const lng = address.longitude;
  const latLng = `${lat},${lng}`;
  // 对标签做编码处理，避免特殊字符导致链接失效
  const label = encodeURIComponent(name);

  const url = Platform.select({
    // iOS调整参数格式，让地图优先解析经纬度再显示标签
    ios: `maps://?q=${latLng}&label=${label}`,
    // 安卓如果要自动解析地址，可去掉括号内的标签，或提前把反向解析得到的门牌号拼入标签
    android: `geo:0,0?q=${latLng}(${label})`,
    // 如果安卓端完全不需要自定义标签，可改成以下写法强制触发地址解析：
    // android: `geo:${lat},${lng}?q=${latLng}`
  })

  // 增加url合法性校验，避免调起失败
  const supported = await Linking.canOpenURL(url);
  if (supported) {
    await Linking.openURL(url);
  }
}

如果调整参数后仍未显示门牌号，你可以在本地调用框架自带的反向地理编码能力提前获取到包含门牌号的完整地址，再拼入label参数即可。

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