声明全局google地图对象

Question

我正在尝试使用Google Maps API来显示一些标记。当侧边栏中的座席名称被单击时，我也会尝试平移到标记。我不想在每次代理单击时重新创建地图对象和标记对象。navAgent函数本质上具有map.panTo(latLng)，它将地图平移到代理的位置。但是为此，我必须保持地图和标记对象是全局的。我该如何做到这一点？

这是一个沙盒：https://codesandbox.io/s/googlemaps-vdg68

代码：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Row, Col } from "reactstrap";

import "./styles.css";
export default class App extends Component {
  constructor(props) {
    super(props);
    // console.log("Comments lead_id" + this.props.id);
    this.state = {
      agentList: [
        {
          status: "green",
          name: "X",
          lat: "28.5718026",
          long: "77.0275846"
        },
        {
          status: "grey",
          name: "Y",
          lat: "28.5700000",
          long: "77.0275846"
        }
      ]
    };

    this.initMap = this.initMap.bind(this);
    this.navAgent = this.navAgent.bind(this);
  }

  componentDidMount() {
    this.initMap();
  }

  initMap() {
    var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 10,
      center: new google.maps.LatLng(28.6139, 77.209),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    for (var i = 0; i < this.state.agentList.length; i++) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(
          this.state.agentList[i].lat,
          this.state.agentList[i].long
        ),
        map: map,
        zoom: 9
      });
    }
  }

  navAgent(idx, e) {
    e.preventDefault();

    // console.log(this.state.agentList[id].lat);
    var latLng = new google.maps.LatLng(
      this.state.agentList[id].lat,
      this.state.agentList[id].long
    );

    map.panTo(latLng);
  }

  render() {
    return (
      <div>
        <Col xs="9" sm="9" md="9" lg="9">
          <div
            id="map"
            style={{
              width: "100%",
              height: "500px",
              backgroundColor: "gray",
              borderRadius: "5%"
            }}
          />
        </Col>
        <Col xs="3" sm="3" md="3" lg="3">
          <span
            style={{
              margin: "2px",
              fontSize: "12px",
              textAlign: "center",
              marginLeft: "1em"
            }}
          >
            {this.state.agentList.map(function(d, idx) {
              {
              }
              return (
                <div>
                  <button
                    onClick={e => {
                      this.navAgent(idx, e);
                    }}
                  >
                    {d.name}
                  </button>
                </div>
              );
            }, this)}
          </span>
        </Col>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

如果需要重用地图对象，则应该通过将该对象声明为

this.map = new google.maps.Map(document.getElementById("map"), {
      zoom: 10,
      center: new google.maps.LatLng(28.6139, 77.209),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

然后，当填充标记提供相同的地图对象时

map: this.map,

在此之后，在您的导航代理中执行此操作将完成此工作

    navAgent(idx, e) {
    e.preventDefault();

    // console.log(this.state.agentList[id].lat);
    var latLng = new google.maps.LatLng(
      this.state.agentList[id].lat,
      this.state.agentList[id].long
    );

    this.map.panTo(latLng);
  }

请注意，我使用的是this.map。这是使对象可供类组件内的函数访问的方法。

我也为你修复了codesandbox，https://codesandbox.io/s/googlemaps-oeb4v