点击标记时反应谷歌地图api集成信息窗口

【问题标题】：React google map api integrating inforWindow on click of marker点击标记时反应谷歌地图api集成信息窗口
【发布时间】：2022-06-10 22:41:40
【问题描述】：

我正在使用react-google-maps/api 库。我有一个包含 8 个位置的数组，我在所有这些位置上显示不同的自定义 svg 标记。直到这里一切都很好。现在我坚持使用infoWindow 点击每个标记。我试图通过文档，但从来没有得到正确的结果。

import React from 'react'
import { GoogleMap, useJsApiLoader, OverlayView, InfoWindow } from '@react-google-maps/api';

const MapSearch = React.memo(({latitude, longtitude, locations}) =>{
    const containerStyle = {
        width: '100%',
        height: '100%'
    };

    const center = {
        lat: JSON.parse(latitude),
        lng: JSON.parse(longtitude)
    };

    const options = {
      streetViewControl: false,
      fullscreenControl:false,
      mapTypeControl: false,
      zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
      }
    }

    const { isLoaded } = useJsApiLoader({
        id: 'google-map-script',
        googleMapsApiKey: config.googleMapsApiKey
    });


    return(
        isLoaded ? (
            <GoogleMap
              mapContainerStyle={containerStyle}
              center={center}
              zoom={8}
              options={options}
            >
              { /* Child components, such as markers, info windows, etc. */ }
              {locations &&
                locations.map((marker, i) => {
                    return <OverlayView
                      position={{lat:marker.latitude, lng:marker.longitude}}
                      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
                    >
                      <svg className='map-icon' width="44" height="64" viewBox="0 0 44 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                        ---- Path not putting here to avoid code length ----- 
                      </svg>
                    </OverlayView>
                })
              }
            </GoogleMap>
        ) : <></>
    )
});

export default React.memo(MapSearch)

【问题讨论】：

• 看起来您需要为标记连接 onclick 方法，如他们的示例所示 - developers.google.com/maps/documentation/javascript/examples/…

标签： reactjs google-maps react-google-maps-api