react + google-maps-react複数のメーカーをレンダリング

Question

なぜ私のコードが機能しないのですか？ は、1つのマーカのみ、私は

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

をグーグルマップが反応し使用 を示し例hereに述べたように、あなたが正しくAPIを使用していることを確認してください。 withGoogleMapとGoogleMapのマップを作成する必要があります。

さらに、各マーカーはlocationの代わりにpositionキーを使用して、マップ内の位置を特定します。

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

あなたはそれらの変更を行ったら、あなたのコードは動作するはずです。