Я использовал функцию initMap() для отображения карты Google в реакции js. Я хочу обновить состояние при щелчке карты. моя проблема в том, что когда я использую this.setState() внутри функции initMap(), она выдает ошибку TypeError: Cannot read property 'setState' of undefined. подскажите, могу ли я реализовать это другим способом.
import {
Map,
InfoWindow,
GoogleApiWrapper,
LoadingContainer,
Marker,
} from "google-maps-react";
class DrawingMap extends React.Component {
constructor(props) {
super(props);
this.initMap = this.initMap.bind(this);
this.state = {
latLngList: [],
};
}
initMap(mapProps, map) {
var self = this;
const { google } = mapProps;
var poly;
let label = 1;
console.log(this.state);
function addCircle(location) {
let latlng = {};
latlng.lat = location.lat();
latlng.lng = location.lng();
this.setState({
latLngList: latlng,
});
var square = {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: "orange",
fillColor: "orange",
fillOpacity: 1,
scale: 10,
};
var marker = new google.maps.Marker({
position: location,
map: map,
icon: square,
label: {
text: label.toString(),
fontWeight: "bold",
},
});
label++;
}
poly = new google.maps.Polyline({
strokeColor: "orange",
strokeOpacity: 1.0,
strokeWeight: 5,
});
poly.setMap(map);
if (toggle) poly.setMap(null);
google.maps.event.addListener(map, "click", function (event) {
var path = poly.getPath();
path.push(event.latLng);
addCircle(event.latLng);
});
}
render() {
return (
<Map
google={this.props.google}
onReady={this.initMap}
initialCenter={{ lat: 19.993982, lng: 73.790416 }}
mapType={"hybrid"}
zoom={15}
></Map>
);
}
}
export default GoogleApiWrapper({
apiKey: key,
libraries: ["drawing"],
LoadingContainer: LoadingContainer,
})(DrawingMap);