Javascript 谷歌地图上点击标记的操作

我正在用“React Google maps”制作一个Google Map应用程序，我有以下代码：

• 在App.js文件中，我声明图像处于以下状态：

• 和map.js文件中的标记定义：

。。。{
道具。标记位置激活（i）
resetInfoBox（）
getInfo（marker.title）
市场点击道具（一）
geocodeByPlaceId（标记位置）
。然后（结果=>{
常量地址=结果[0]。格式化的\u地址；
document.getElementById（'address'）。innerHTML='address:'+address；
})
.catch（错误=>console.error（错误））
}}>

我想在单击标记时更改标记符号。但这并不能很好地工作，因为当我点击marker时，每个markers图标都会改变，而不仅仅是点击的这个。。。。 我该怎么做？也许你们中的一些人知道，我的代码出了什么问题

以下是指向GitHub上具有此应用程序的存储库的链接：

---

谢谢你的帮助

要保持多个标记的图标状态，一个标记集合的道具是不够的。也许您可以将图像/图标添加到“marker”数据结构（markers\u all中的项目）中？嗯，我不确定是否可以只更改1个marker图标。但是如果可能的话，你可能必须保留一个所有标记的数组。检索要从阵列中更改的一个标记，然后替换该图标。嗨，mrdeadsven！谢谢你的提示-我试着这样做…谢谢你的帮助。我把这段代码放在map.js文件中：

让markerImage='path-to-image'如果（I==props.activeKey）markerImage='path-to-other-image'

，然后把markerImage放在icon:

icon={markerImage+marker.type+'.png'}

中，这样做很好：）

... state = {
        markers: markers_all,
        pageTitle: "Warsaw Cultural Map",
        listTitle: "List of Places",
        activeKey: "",
        error: "There was an error with making a request from Wikipedia.",
        image: "http://www.serwisstron.pl/icons/",   };

//This is function for onclick marker   onMarkerClick = () => {
    this.setState({image: 'http://www.serwisstron.pl/icons/yellow/'})} 

...  <Marker
    {...marker}
    key={i}
    position={marker.location}
    title={marker.title}
    icon={props.image + marker.type + '.png'}
    animation={window.google.maps.Animation.DROP}
    onClick={() => {
       props.markerLocationsActive(i)
       resetInfoBox()
       getInfo(marker.title)
       props.onMarkerClick(i)
       geocodeByPlaceId(marker.place_id)
       .then(results => {
          const address = results[0].formatted_address;
          document.getElementById('address').innerHTML = 'Address: ' + address;
        })
       .catch(error => console.error(error))
     }}>