0

我已经使用 initMap() 函数在 react js 中渲染谷歌地图。我想更新地图点击事件的状态。我的问题是，当我在 initMap() 函数中使用 this.setState() 时，会出现TypeError 错误：无法读取未定义的属性“setState”。请建议我可以用另一种方式实现吗。

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);
4

1 回答 1

1

React.Component 不会自动将方法绑定到自身。
要解决此问题，您可以将 addCircle 更改为箭头函数，但也可以映射单击事件侦听
器，或者更轻松地使用存储的此引用，如此 Demo

import React, { Component } from "react";
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();
      self.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);
于 2020-07-18T17:04:26.870 回答