Question

我正在使用一个库，google-map-react：https://github.com/istarkov/google-map-react

我已按照自述文件中的说明操作，地图会显示在屏幕上，但默认情况下会占用整个屏幕，我无法更改。这是我的代码。我试过了：

$this->load->library('cart');

和

 <GoogleMapReact
    defaultCenter={this.props.center}
    defaultZoom={this.props.zoom}
    style={{height: '400px', width: '400px'}}
  >

和

<GoogleMapReact
    defaultCenter={this.props.center}
    defaultZoom={this.props.zoom}
    size={{height: '400px', width: '400px'}}
  >

我也尝试使用百分比而不是硬编码像素。文档没有说明如何设置大小，我该怎么做？我甚至尝试将它放入（从引导程序）内部，它仍占用整个区域。如何手动设置尺寸？

Answer 1

此处的文档：

https://github.com/istarkov/google-map-react/blob/master/DOC.md

举了一个例子，虽然我对你如何将其传递给GoogleMapReact标签并不明显：

{
  center: { lat, lng }, // current map center
  zoom: 4, // current map zoom
  bounds: { nw, se, sw... }, // map corners in lat lng
  size: { width, height... } // map size in px
}

还有这个例子：

https://jsbin.com/roqutisoqu/1/edit?js,console,output

其中宽度和高度作为div上的内联样式提供，地图呈现在：

ReactDOM.render(
  <div style={{width: '100%', height: 400}}>
    <SimpleMap/>
  </div>,
  document.getElementById('main')
);

Answer 2

放置GoogleMapReact组件非常重要，因为容器的大小（宽度）非常重要

请同时参考我的答案，该答案使用相同的库： Implementing google maps with react

在这种情况下，您可以使用以下代码:(使用另一个DIV作为包装，宽度和高度根据您的喜好设置）

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class MyClass extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      <div style={{height: '400px', width: '400px'}}>
        <GoogleMapReact
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
          style={{height: '400px', width: '400px'}}
        >
          <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text={'Google Map'}
          />
        </GoogleMapReact>
      </div>
    );
  }
}
MyClass.defaultProps = {
  center: {lat: 59.95, lng: 30.33},
  zoom: 11
};

export default MyClass;

Answer 3

我遇到了同样的问题，在彻底阅读documentation之后，现在已经解决了这个问题。该文档说：

默认情况下，如果父级大小已更改，则默认映射将不会引发onChange事件，要更改此类行为，请添加resetBoundsOnResize = {true}属性。

我刚刚在resetBoundsOnResize = {true}中添加了属性GoogleMapReact，如下所示：

<GoogleMapReact
    resetBoundsOnResize={true}
    bootstrapURLKeys={{ key: "your api key" }}
    defaultCenter={location}
    defaultZoom={zoomLevel}
  >

地图现在正在父级内部渲染。

谷歌地图占据了整个屏幕

3 个答案: