禁用嵌入式谷歌地图上的气泡

问题描述

知道如何在我的嵌入式谷歌地图上禁用这些气泡吗？

我正在使用 react-google-map 将其嵌入到 react/typescript 应用程序中

这是我的代码：

import React,{ FC,useState,useEffect } from 'react'
import GoogleMapReact from 'google-map-react'
import Marker from './Marker'

...


export const SimpleMap : FC<any> = ({}) => {

...

    return (
        <div style={{ height: '80vh',width: '100%',marginTop: '32px' }}>
            <GoogleMapReact
                bootstrapURLKeys={{ key: 'redacted' }}
                defaultCenter={center}
                defaultZoom={zoom}
                onChildClick={_onChildClick}

                //yesIWantToUseGoogleMapApiInternals
                onGoogleApiLoaded={({ map,maps }) => apiIsLoaded(map,maps,places)}
            >
            </GoogleMapReact>
        </div>
    )
}

解决方法

谢谢Upisdown 先生：Disable bubbles on embedded google maps

问题已通过将 clickableIcons 设置为 false 得到解决

另见此答案：disable clickable landmark on google map

const apiIsLoaded = (map: any,maps: any,places: any) => {
    map.setClickableIcons(false) // Need to call this to disable POIs
    ...
}

import React,{ FC,useState,useEffect } from 'react'
import GoogleMapReact from 'google-map-react'
import Marker from './Marker'

...


export const SimpleMap : FC<any> = ({}) => {

...

    return (
        <div style={{ height: '80vh',width: '100%',marginTop: '32px' }}>
            <GoogleMapReact
                bootstrapURLKeys={{ key: 'redacted' }}
                defaultCenter={center}
                defaultZoom={zoom}
                onChildClick={_onChildClick}

                yesIWantToUseGoogleMapApiInternals
                onGoogleApiLoaded={({ map,maps }) => apiIsLoaded(map,maps,places)}
            >
            </GoogleMapReact>
        </div>
    )
}