Google 地图 Api 无法在 dragend 事件中调用函数

Question

使用与 Google 地图 Api 的反应，我正在附近搜索以查找和放置篮球场的别针。首次加载地图时，它可以工作并放置图钉：

loadMap() {
    if (this.props && this.props.google) {
      // checks if google is available
      const { google } = this.props;
      const maps = google.maps;

      const mapRef = this.refs.map;

      // reference to the actual DOM element
      const node = ReactDOM.findDOMNode(mapRef);

      let { zoom } = this.props;
      const { lat, lng } = this.state.currentLocation;
      const center = new maps.LatLng(lat, lng);
      const mapConfig = Object.assign(
        {},
        {
          center: center,
          zoom: zoom,
          options: options
        }
      );

      // maps.Map() is constructor that instantiates the map
      this.map = new maps.Map(node, mapConfig);

      // This is the function to display all the markers  
    
      this.searchCourts(); // This works properly

       // This one below fails

      this.props.google.maps.event.addListener(this.map, "dragend", function() {
           this.newSearchonDrag() //Error: this.NewSearchonDrag is not a function ????
      })
      }
    }

这是 searchCourts 函数：

searchCourts = () => {
      const map = this.props.google.maps.Map

      const { google } = this.props;
      const maps = google.maps;

      const request = {
        location: this.map.getCenter(),
        radius: '50000',
        name: ['basketball court']
      }

      const service = new google.maps.places.PlacesService(this.map);

  // ACTUAL SEARCH FOR COURTS
      service.nearbySearch(request, function(results, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);  
          }
        }
      });

      // MARKERS TO BE DROPPED
     
    const createMarker= (place) => {
      let marker = new this.props.google.maps.Marker({
        map: this.map,
        position: place.geometry.location,
        title: place.name
      });

      let infowindow = new this.props.google.maps.InfoWindow({
        name: place.name,
        vicinity: place.vicinity
      });  

      marker.addListener("click", function() {

        let contentString = `<div id="infowindow">` + place.name + `<br>` + place.vicinity + `</div> `
      
        infowindow.setContent(contentString)
        infowindow.open(this.map, marker)          
      })       
      }
    }

这在地图加载并且我的 newSearchonDrag() 与 searchCourts() 基本相同时起作用，但是当它被拖动时我能够找到地图的新中心。

这个问题在我看来是一个范围问题...在我的 dragend 事件中...我无法在我的地图中调用任何函数 class...似乎可以调用 searchCourts()每次拖动发生但我不确定如何在事件中调用它。

Answer 1

所以我做了一些 hack 来解决这个问题。我创建了一个名为 FindCourts 的函数，它呈现一个按钮，当单击该按钮时，它会触发 searchCourts() 函数。因此，在 map dragend 事件中，我为按钮分配了一个变量并执行了 button.click()...它起作用了，之后我隐藏了按钮。

//Click Event
   maps.event.addListener(this.map, "dragend", function() {
              var button = document.querySelector("#root > div > header > div.NavBar > div:nth-child(3) > div:nth-child(1) > div > button.findcourts")
              button.click()
            })

// And the button function

FindCourts = () => {     
      return (
        <button 
          className="findcourts"
          onClick={() => {
            this.searchCourts()
          }}
        >Find Courts
        </button>
      );
    }

Google 地图 Api 无法在 dragend 事件中调用函数

Google Maps Api cannot call function inside dragend event

javascript

events

google-maps-api-3

google-places-api

reactjs