如何在google- InfoWindow -react中添加一个地图到我的标记？

在 Google Maps API 中，可以使用 InfoWindow 组件来在标记上显示地图。以下是在 React 中添加地图到标记的步骤：

首先，确保已经安装了 google-maps-react 包。可以使用以下命令进行安装：

npm install google-maps-react

在需要显示地图的组件中，导入 Map 和 Marker 组件以及 InfoWindow 组件：

import React, { Component } from 'react';
import { Map, Marker, InfoWindow } from 'google-maps-react';

在组件的 render 方法中，创建一个 Map 组件，并在其中添加一个 Marker 组件。同时，为 Marker 组件设置 onClick 事件处理函数，以便在点击标记时显示 InfoWindow：

render() {
  return (
    <Map google={this.props.google} zoom={14}>
      <Marker onClick={this.onMarkerClick} name={'Current location'} />

      <InfoWindow onClose={this.onInfoWindowClose}>
        <div>
          <h1>InfoWindow Content</h1>
        </div>
      </InfoWindow>
    </Map>
  );
}

在组件中添加 onMarkerClick 和 onInfoWindowClose 方法来处理标记点击事件和关闭 InfoWindow 事件：

onMarkerClick = (props, marker, e) => {
  // 在这里处理标记点击事件
}

onInfoWindowClose = () => {
  // 在这里处理关闭 InfoWindow 事件
}

最后，在组件的 constructor 方法中，使用 window.google.maps 对象来初始化地图：

constructor(props) {
  super(props);
  window.google.maps.event.addDomListener(window, 'load', this.initializeMap);
}

initializeMap = () => {
  // 在这里初始化地图
}

这样，你就可以在 React 中添加地图到标记了。你可以根据需要自定义 InfoWindow 的内容和样式。如果需要更多的地图功能，可以参考 Google Maps API 文档进行进一步的开发。

腾讯云相关产品和产品介绍链接地址：