Question

我正在使用＆＃39; react-google-maps＆＃39;在React中制作Google地图应用程序，我有以下代码：

在App.js文件中我声明了状态：

... 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/'})}

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

...  <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))
     }}>

我想在点击标记时更改标记符号。但是效果不好，因为当我点击标记然后每个标记图标都会改变，而不仅仅是这个被点击的图标.... 我怎样才能做到这一点？也许有些人知道，我的代码有什么问题？

以下是使用此应用程序在GitHub上存储库的链接： https://github.com/hajczek/Neighborhood---Warsaw-Cultural-Map

感谢您的帮助！

Google地图上点击标记的操作

0 个答案: