如何解决为什么我看不到Google地图上的任何标记有反应?
我一直在构建启用了Google Maps API的应用程序的前端。我想让用户单击地图以添加标记,并将其存储到数组中;但是,当我在Google Map标记的onClick中实现了添加标记功能后,标记将无法呈现。
我在实现React的添加标记功能时遇到了很多困难,并且看了几本教程,但似乎找不到解决方法。任何帮助将不胜感激!
const options = {
styles: mapStyles,disableDefaultUI: true,zoomControl: true,}
var markersArray = [];
function addMarker(event){
let marker = new window.google.maps.Marker({
position: event.latLng,time: new Date(),draggable: true
});
markersArray.push(marker);
}
const Map = withScriptjs(withGoogleMap(props =>
<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: this.state.mapPosition.lat,lng: this.state.mapPosition.lng }}
options={options}
onClick={(event) => {
console.log(event);
console.log(markersArray);
addMarker(event);
}}
>
{markersArray.map((marker) =>(
<Marker
key={marker.time.toISOString()}
position={{lat: marker.lat,lng: marker.lng }}
/>
))}
<AutoComplete
style={{width: "100%",height:'40px'}}
types={['(regions)']}
onPlaceSelected={this.onPlaceSelected}
/>
</GoogleMap>
));
我相信问题出在此,但我不确定如何使它起作用。
{markersArray.map((marker) =>(
<Marker
key={marker.time.toISOString()}
position={{lat: marker.lat,lng: marker.lng }}
/>
))}
解决方法
markersArray
是一个纯数组。当您执行addMarker(event);
时,您并没有更新组件的状态,它只是一个简单的数组。因此,可能React并未意识到这一变化。如果您使用的是钩子,则可以使用这样的标记创建状态
const [markers,setMarkers] = useState([])
使用该markers
数组呈现<Marker />
,然后在您的事件上添加标记
onClick={(event) => {
setMarker(previousMarkers => previousMarkers.concat([event]))
}
这将导致使用新值markers
重新渲染,您应该可以看到它们。
如果它不是功能组件,而是类,则相同,但是您可以在类的状态下定义标记
constructor(props) {
super(props)
this.state = { markers: [] }
this.addMarker = this.addMarker.bind(this)
}
// function class below
addMarker(marker) {
this.setState(previousState => previousState.concat([marker])
}
在您遇到的情况下,您会致电this.addMarker(marker)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。