css - 谷歌地图组件可以从它所在的外部卡中拖动，缩放控制移动

Question

找到了我自己的解决方案。请参阅原始帖子下方的答案。

我制作了一个包含多个 React 组件的网站。我从一个组件中获取了 Google Maps API，并将其放入另一个组件的容器中。

我的问题是双重的:

1. 从某种意义上说， map 似乎超出了容器范围，您可以用来拖动 map 的“手”出现在边界之外。 Hand appears outside of map当我开始四处拖动 map 时，我还看到这些奇怪的蓝线出现，就好像 map 确实存在于整个窗口中一样。 Blue lines when I drag map

2. 当我将鼠标悬停在缩放控件和街景 View 的图标上时，它们会移动。他们跳到我窗口中的另一个位置并且不回来。 Image showing how the icons appear far upper left我唯一的解决方案是在 map 组件中禁用它们，这不是一个非常令人满意的解决方案。

我关注了a tutorial for how to make a grid layout .我对我的 CSS 没有足够的信心来查看是否是这种布局扰乱了 map ，所以我尝试在下面包含相关的 CSS。

我试过将位置从“相对”更改为“绝对”再到“静态”。并在 CSS 中添加了 !important，因为 Google API 似乎覆盖了它。这似乎不会影响这些问题。

我还花了很多时间将 map 放置在它所在的容器中。这里的解决方案是使 map 宽度:100% 和高度固定 (200px)。这现在发生在多个地方，可能完全过大了:

CSS for the card that the hotel image, description and map appear in.

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;  
    background-color:rgba(44,182,187,0.1);
    margin-bottom: 20px;
    -webkit-column-break-inside: avoid;
    padding: 24px;
    box-sizing: border-box;
  }

  .card.map {
      width: 100%;
      height: 200px;
      align-items: normal;
      padding: 0;
  }
  #map {
    position: relative !important; 
    height: 200px !important;
    width: 100% !important;
  }

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

class Map extends Component {
render() {
const style = {
    width: "100%",    
    height: 200,
    position: "relative",
 }

return (

    <Map 
        google={this.props.google} 
        zoom={13}
        mapTypeControl={false}
        // zoomControl={false}
        // streetViewControl={false}
        initialCenter={{
        lat: this.props.lat,
        lng: this.props.lng
        }}
        style={style}>
    <Marker position={{ lat: this.props.lat, lng: this.props.lng}} />
    </Map>

CSS that defines the grid layout:


.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100px 1fr;
    grid-template-areas:
      "header"
      "main";
    height: 100vh;
    max-width: 1280px;
    margin: 0 auto;
  }

Answer 1

我只能通过在代码中嵌入谷歌地图来解决这个问题。

我还在 iframe 组件中使用了 props。请记住首先在您在 Google 的开发者资料中激活嵌入式 API。我 followed this guide并在 Stackoverflow 上找到了关于如何包含 Prop 的很好的帮助。

This is how it looks with the embedded map.

所以我最终没有使用单独的 map 组件。我只是将此文本放在我之前导入 Map 组件的位置:

<iframe 
     title= "greentravel"
     width="100%" 
     height="250px" 
     frameborder="0" 
     style={{ border: 0}}
     src={`https://www.google.com/maps/embed/v1/place?key= 
     0000000yourkey00000000&q=${props.lat},${props.lng}&zoom=15`} allowfullscreen>
</iframe> 

在没有嵌入的情况下，我在使用另一个 API 的几个浏览器中遇到了同样的问题。也尝试了这个“@react-google-maps/api”，但遇到了与“google-maps-react”相同的问题。