javascript - react 谷歌地图，更新标记OnIdle

Question

我想获取 map 容器 Angular 并在 onIdle 事件之后转换为谷歌地图坐标我想更新标记和我的列表组件，使用 React-google-maps https://github.com/istarkov/google-map-react请帮忙 ，谢谢

import _ from "lodash";

import React , {Component , PropTypes} from 'react';
import {Col} from 'antd';

import { withGoogleMap, GoogleMap, Marker , Polygon } from "react-google-maps";
import MarkerClusterer from "react-google-maps/lib/addons/MarkerClusterer";
import withScriptjs from 'react-google-maps/lib/async/withScriptjs';

const AsyncGoogleMap = _.flowRight(
  withScriptjs,
  withGoogleMap
)(props => (
  <GoogleMap
    ref={props.onMapLoad }
    onIdle={props.onMapIdle}
    defaultZoom={14}
    defaultCenter={{ lat: 35.7206037, lng: 51.38875 }}
  >
    <MarkerClusterer
      averageCenter
      enableRetinaIcons
      gridSize={2}
    >
    {/*imagePath={'./styles/images/blue-pin'}*/}
    {props.markers.map(marker => (
      <Marker
        icon={{
          url: './styles/images/blue-pin.png'
        }}
        position={{ lat: marker.lat, lng: marker.lon }}
        key={marker.id}
      />
    ))}
    </MarkerClusterer>
    {/*<Polygon path={path} /> */}
  </GoogleMap>
));
export default class AsyncGoogleMapComponent extends Component {
  constructor(props){
    super(props)
    this.state = {
      markers: [],
    };

  }
  componentWillReceiveProps(newProps){
    {/*console.log(newProps.projects); */}
    this.setState({
      markers: newProps.projects
    })
  }
  componentDidMount(){

  }
  render() {
    {/*console.log(this.state.markers); */}
    return (
      <Col span={12} className="gutter-row card_group" ref="child">
        <AsyncGoogleMap
          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBebpbsHU358P8sfvxfn7fFmsQIB2UNk94"
          loadingElement={
            <div style={{ height: `100%` }}>

            </div>
          }
          containerElement={
            <div style={{ height: `100%` }} />
          }
          mapElement={
            <div id='googlemap' ref="targetDiv" style={{ height: `100%` }} />
          }
          onMapIdle={ ()=> { console.log('map is ready') } }
          markers={this.state.markers}

        />
      </Col>
    );
  }
}

Answer 1

首先，您可以定义 onChange map 处理程序:

<GoogleMap
 onChange={props.onMapChange}
/>

下一步添加到您的组件

<AsyncGoogleMap 
 onMapChange={this.handleMapChange}
/>

并且在您的 AsyncGoogleMapComponent 中您将收到 map 的新参数

  handleMapChange = ({ center, zoom, bounds }) => {
    ....
    this.updateMarkers();
  };