无法从 react-native-maps 循环多个标记

Posted 2023-02-16

【中文标题】无法从 react-native-maps 循环多个标记

【英文标题】：Cannot loop multiple markers from react-native-maps

【发布时间】：2021-11-12 08:21:48

【问题描述】：

所以我有从 firebase 获取的餐馆数据。数据以餐馆的形式存储在状态中。数据如下所示。

[
    
        "resName": "KFC",
        "photoUri": "https://firebasestorage.googleapis.com:443/v0/b/zomato-e0030.appspot.com/o/restaurants%2FDDB3BC53-C787-4D8F-8945-AD56CBEC89C8.jpg?alt=media&token=bb26bff4-9a49-459f-bef0-63cd6f31f428",
        "phNo": "6786785894",
        "userId": "d4cbsBEB4pTMsHHpXT8gkleQMA52",
        "desc": "yhduhw",
        "address": "\"latitude\":37.78716805152233,\"longitude\":-122.40707527846098",
        "key": "W2Vt5I8tkBoLsBGJ5WWK"
    ,
    
        "resName": "Thalapakatii",
        "photoUri": "https://firebasestorage.googleapis.com:443/v0/b/zomato-e0030.appspot.com/o/restaurants%2F4FF27972-6246-48FE-B087-FCAE7E3609B9.jpg?alt=media&token=29c5b686-c509-479a-8528-647701f9dad0",
        "phNo": "9806789890",
        "userId": "d4cbsBEB4pTMsHHpXT8gkleQMA52",
        "desc": "Non Veg Restaurant",
        "address": "\"latitude\":37.78315900527187,\"longitude\":-122.4291666224599",
        "key": "ZC2G5Pw6jhRkS6TXrnlo"
    ,
    
        "resName": "Domino’s",
        "photoUri": "https://firebasestorage.googleapis.com:443/v0/b/zomato-e0030.appspot.com/o/restaurants%2F54294088-871D-4791-9DE7-B448172A9176.jpg?alt=media&token=f4556591-ede1-4113-831d-a5beb03216c8",
        "phNo": "9879879873",
        "userId": "d4cbsBEB4pTMsHHpXT8gkleQMA52",
        "desc": "Fast Food",
        "address": "\"latitude\":37.75686216886715,\"longitude\":-122.4325693398714",
        "key": "w4MsQ3l92hrwzqUBLEAh"
    
]

当我尝试循环数组时，文本组件在地图上以餐厅名称呈现，但标记不在所需坐标上

 restaurants.length>0&&restaurants.map((res,index)=>
           let coordinate = JSON.parse(res.address);
          return(
            <>
             <Marker
             key=index
             pinColor="purple"
             coordinate=coordinate
            />
            <Text>res.resName</Text> 
            </>
          )
         )

【问题讨论】：

你能通过JSON.parse(res.address);得到正确的坐标吗？

是的，我得到了正确的坐标

我认为你必须改变 "latitude":37.75686216886715,"longitude":-122.4325693398714 而不是 "\"latitude\":37.75686216886715, \"经度\":-122.4325693398714"

当我使用 JSON.parse() 解析地址时，字符串将被转换为对象键，例如 latitude:37.75686216886715,longitude:-122.4325693398714。所以这可能不是问题

【参考方案1】：

您是否收到以下警告？

“列表中的每个孩子都应该有一个唯一的“key”道具”

尝试将他们的密钥属性更改为key=res.resName + index。

【讨论】：

每个restaurant 都有一个key 属性，我建议使用它而不是您的答案

试过没用