1

我正在编写我的第一个 React 应用程序（使用 create-react-app），并使用 google-maps-react 编写了一个地图组件。但是，地图下方的链接无法点击。

实际上，在我的网页上，这个问题只出现在中小型屏幕上，而在大屏幕上（由 materializecss 定义的小、中、大）完美运行。我试图在一个最小的工作示例上重现该问题，但没有具体化，只需使用由“npx create-react-app my-app”创建的样板代码并添加以下内容：

MapComponent.js

import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';

const mapStyles = {
  width: '80vw',
  height: '45vw',
  marginLeft: 'auto',
  marginRight: 'auto',
  display: 'block'
};

const MapComponent = (props) => {
  return (
    <div className="MapComponent">
    <div>
    <a href="https://www.google.com/">Google</a>
    </div>
    <Map
    google={props.google}
    zoom={10}
    style={mapStyles}
    initialCenter={{
      lat: 40,
      lng: 12
    }}
    />
    <div>
    <a href="https://www.google.com/">Google</a>
    </div>
    </div>
  );
}

export default GoogleApiWrapper({
  apiKey: "Key"
})(MapComponent);

然后在 App.js 中：

import React, { Component } from 'react';
import MapComponent from './MapComponent';

class App extends Component {
  render() {
    return (
      <div className="Appr">
        <MapComponent />
      </div>
    );
  }
}

export default App;

（示例中未报告密钥，因此地图会显示带有错误消息的帧，但问题与密钥相同）。可以单击 google.com 的第一个链接并且可以工作，而第二个则不能。任何解决方案/解决方法？

4

1 回答 1

0

最后，我浏览了 google-maps-react 的源代码，找到了解决方案。它非常简单，但没有记录。除了组件接受一个道具，允许改变容器包装的style样式。默认情况下，位置设置为提供上述行为。以下代码为我解决了这个问题：MapcontainerStyleMapposition: absolute

import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';

const mapStyles = {
  width: '80vw',
  height: '45vw',
  marginLeft: 'auto',
  marginRight: 'auto',
  display: 'block'
};

const containerStyle = {      {/* Added style */}
    position: 'static'
}

const MapComponent = (props) => {
  return (
    <div className="MapComponent">
    <div>
    <a href="https://www.google.com/">Google</a>
    </div>
    <Map
    google={props.google}
    zoom={10}
    style={mapStyles}
    containerStyle={containerStyle}   {/* Added prop */}
    initialCenter={{
      lat: 40,
      lng: 12
    }}
    />
    <div>
    <a href="https://www.google.com/">Google</a>
    </div>
    </div>
  );
}

export default GoogleApiWrapper({
  apiKey: "Key"
})(MapComponent);
于 2018-12-29T18:59:42.577 回答