react + google-maps-react渲染多个制造商

Question

为什么我的代码无法正常工作？ 只能说明一个标记 我用谷歌，地图，反应

const data = {"shops":[{"name":"Tienda1","location":{"lat":-34.4712726922992,"lng":-58.75985026359558}}, 
 
          {"name":"Tienda2","location":{"lat":-34.4684599474558,"lng":-58.757007122039795}}, 
 
          {"name":"Tienda3","location":{"lat":-34.46932677829895,"lng":-58.760215044021606}}, 
 
          {"name":"Tienda4","location":{"lat":-34.470989653082555,"lng":-58.76484990119934}}]} 
 
    return (
 
     <div> 
 
      <Map google={window.google} initialCenter={{lat: -34.47509000000001, lng: -58.75374599999998}} zoom={10}> 
 
      { 
 
       data.shops.map((x)=>(<Marker key={uuid.v4()} {...x}/>)) 
 
      } 
 
      </Map> 
 
     </div> 
 
    )

Answer 1

确保您正确使用API​​的例子here说明。您将不得不使用withGoogleMap和GoogleMap创建地图。

另外，每个标记使用密钥position而不是location来指向地图中的位置。

[{ 
    position: { 
    lat: 25.0112183, 
    lng: 121.52067570000001, 
    }, 
    key: `Taiwan`, 
    defaultAnimation: 2, 
}, ...] 

一旦你做了这些改变，你的代码应该工作。