首页 > 解决方案 > 谷歌地图组件可以从它所在的外部卡片中拖动,并且缩放控制移动

问题描述

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

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

我的问题是双重的:

  1. 地图似乎超出了容器的范围,因为您可以用来拖动地图的“手”出现在边界之外。手出现在地图之外当我开始拖动地图时,我还看到这些奇怪的蓝线出现,就好像地图确实存在于整个窗口中一样。拖动地图时出现蓝线

  2. 如果我将鼠标悬停在缩放控制和街景图标上,它们会移动。他们跳到我窗口的另一个位置并且不回来。显示图标如何出现在左上角的图像我唯一的解决方案是在地图组件中禁用它们,这不是一个非常令人满意的解决方案。

我遵循了如何制作网格布局的教程。我对我的 CSS 没有足够的信心来查看是否是这个布局弄乱了地图,所以我试图在下面包含相关的 CSS。

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

我还花了很多时间将地图放在它所在的容器中。这里的解决方案是使地图宽度: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;
  }

标签: cssreactjs

解决方案


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

我还使用了 iframe 组件中的道具。请记住首先在您的 Google 开发人员资料中激活嵌入式 API。我遵循本指南并在 Stackoverflow 上找到了有关如何包含道具的良好帮助。

这就是嵌入地图的外观。

所以我最终没有使用单独的地图组件。我只是将此文本放在我之前导入 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”相同的问题。


推荐阅读