Question

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

实际上，在我的网页上，此问题仅出现在中小尺寸的屏幕上，而在大屏幕（由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并起作用，而第二个则不能。任何解决方案/解决方法？

Answer 1

最后，我浏览了google-maps-react的源代码并找到了解决方案。这非常简单，但是没有文档记录。除了setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);之外，style组件还接受Map的支持，从而可以更改包装containerStyle的容器的样式。默认情况下，位置设置为Map，以提供上述行为。以下代码为我解决了这个问题：

position: absolute

地图组件下的锚点链接不可点击

1 个答案: