Question

我构建了一个React组件，以在我的React应用程序中使用Map Api显示Google Map。在index.html中，我按如下方式加载了Google Maps Api脚本

index.html

...
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<%= GOOGLE_MAPS_KEY %>&libraries=places"></script>
...

然后这就是我的组件的样子

map.js

"use strict";
import React, {Component} from "react";

class MapComponent extends Component {

  componentDidMount(){
    this.map = new google.maps.Map(document.getElementById(this.props.mapId), {
      zoom: 11,
      center: {lat: 45.4642035, lng:  9.189982}
    });
  }

  componentDidUpdate(){
    if(this.props.lat){
      this.map.setCenter({lat: this.props.lat, lng: this.props.lng})
      if(this.marker)
      {
        this.marker.setPosition({lat: this.props.lat, lng: this.props.lng});
      }
      else
      {
        this.marker = new google.maps.Marker({
          zoom: 11,
          position: {lat: this.props.lat, lng: this.props.lng},
          map: this.map,
        });
      }
    }
  }

  render(){
    return(
      <div className="map-container">
        <div className={ (this.props.address)?'map-info':'' }>{ this.props.address }</div>
        <div id={this.props.mapId}></div>
      </div>
    );
  }

}

export default MapComponent;

如果我渲染一张地图，一切正常，但是当我尝试在同一视图中渲染多张地图时，只会显示第一个。我在控制台中没有错误。关于我在哪里犯错或我在做什么错的任何线索？谢谢

无法使用自定义组件在我的React应用程序中加载多个地图

0 个答案: