将 StandaloneSearchBox 放入代码中时，React Google Maps 卡在“加载中”

[英]React Google Maps Stuck on "Loading" when putting the StandaloneSearchBox in the code

我在我的 React js 上有一个页面，我正在尝试允许公司注册我的网站并添加他们的位置，以便其他公司过来进行租赁、购买等。如果我可以添加标记，我还需要标记。 我已经在我的页面上获得了我的 Google 地图，但是，我无法在页面上获得搜索栏 ( StandaloneSearchBox )，因为它卡 ...

Google map 在 React 应用程序中不工作，但在代码沙箱中工作

[英]Google map is not working in react application but it is working in code sandbox

我正在尝试将 google map 集成到我的 React 应用程序中。 但是 map 是空白的。 这就是我得到的。 来自我的应用程序的 Google map 图片但是相同的代码在我的代码沙箱中运行得非常好。 我不知道发生了什么。 我需要立即帮助这是我的代码沙箱的链接，我的 map 在其中工作正常， ...

如何在 React 中显示 StreetViewPanorama？

[英]How to display StreetViewPanorama in React?

我想知道这是否可能。 在互联网上找到一些图书馆，但他们的文档描述不佳或已过时。 我正在尝试使用谷歌 API 密钥让街景完全正常工作我在https://react-google-maps-api-docs.netlify.app/尝试使用@react-google-maps/api库和文档 - 不幸 ...

如何在 react-google-maps/api 中自动居中坐标和缩放多个标记

[英]How to auto center coordinates and zoom for multiple markers in react-google-maps/api

我想在 map 上显示多个动态标记。动态标记的意思是标记由用户过去的活动决定。 我想确定适当的缩放级别和中心坐标，以便用户不必滚动浏览 map。我已经检查了此文档https://react-google-maps-api-docs.netlify.app/但不能找不到与我需要的规范相关的任何示例。 ...

如何安全地将 API 密钥传递给 React 组件所需的 React 前端

[英]How do I safely pass API keys to a React Front end that is needed for a React Component

我正在使用 @react-google-maps/api 在 React 上创建一个 map 组件。 为了加载组件，我们需要将 API 密钥传递给 useJsApiLoader。 如何处理保护 API 密钥，使其在这种情况下在前端不可见？ （我有一个 express.js 后端） 这是@react ...

Invalid LatLng object: (37.42216, undefined) 在我的 react-redux 应用程序上渲染谷歌地图时出错

[英]Invalid LatLng object: (37.42216, undefined) error when rendering google map on my react-redux app

我正在尝试在我的 react-redux 应用程序上呈现谷歌地图。 一切正常。 直到我决定向渲染的谷歌地图添加一些自定义markers 。 现在页面是空白的，因为我在浏览器控制台中看到了这个错误 我很快恢复到工作代码....但它仍然显示相同的错误。 这些是相关代码： locationPin ...

Next js - 在 Vercel 中部署时出现 react-google-maps/api 错误：发生客户端异常

[英]Next js - react-google-maps/api error when deploying in Vercel : A client-side exception has occurred

我的下一个 js 应用程序在开发和构建中运行良好，但是当我尝试在 Vercel 中部署它时，当我尝试调用调用我的 mapView 组件的页面时出现此错误： 应用程序错误：发生客户端异常（有关更多信息，请参阅浏览器控制台）。 这是 vercel 应用程序中的完整日志： 这是我的 map 组件： i ...

为什么 react-google-maps/api 不显示线条和多边形？

[英]Why react-google-maps/api doesn't show lines and polygons?

我在主项目中使用 react-google-maps/api 库，但看不到我在 map 上绘制的线条。 所以我创建了演示项目来尝试相同的代码。 有用。 但主要项目不起作用。 我查看了 react 版本、react-dom 版本、react-google-maps/api 版本。 这三个都是相同的版 ...

react-google-maps 中没有与此调用匹配的重载

[英]No overload matches this call in react-google-maps

我在与 typescript 反应时遇到问题，我正在使用react-google-maps为 google map 但我收到eslint错误这里是错误的屏幕截图 我尝试了所有我知道的东西，但我无法找到问题所在。 这是代码 // Import React import * as React from ...

尝试使用 react-google-maps 平滑地为标记移动设置动画

[英]Trying to animate markers movement with react-google-maps smoothly

我正在尝试像这样为我的谷歌地图标记设置动画...... 标记动画运动示例 我试图将此代码复制到反应中（使用@react-google-maps/api），但无法使其工作，我遇到了多个问题，第一，就是这样，我正在保存动作使用 useState，但是，由于我必须快速多次更新此数据，这可能会导致我的组件 ...

不使用 @react-google-maps/api 渲染的标记

[英]Markers not rendering using @react-google-maps/api

我对世界的反应比较陌生，尤其是对使用谷歌地图。 我正在使用@react-google-maps/api 和 React 版本 18。我正在尝试显示多个位置（作为标记），但是，它们没有显示在初始渲染中。 我按照文档进行操作，没有收到任何错误，只是没有显示标记。 有谁知道为什么？ 谢谢：这是代码： ...

标记未在 localhost next.js 上显示 @react-google-maps/api

[英]Marker not showing @react-google-maps/api on localhost next.js

我知道有类似的问题......但没有人回答我的问题我正在尝试向我的谷歌 map 添加一个标记，但是当我在本地运行项目时它没有显示（在我的实时站点上它工作正常） 这是我的组件import { React, useMemo } from "react"; import { GoogleMap, Ma ...

react-google-maps 未显示并且可能无法请求到 api

[英]react-google-maps not showing and probably not able to request into the api

我真的需要一些帮助。 我的反应项目不能很好地与反应谷歌地图一起工作。 我尝试了其他拥有它但仍然有效的项目，但现在我正在创建一个它不起作用的新项目。 每当我查看谷歌控制台时，请求都没有加起来，我的反应项目仍然是空白的。 我也已经在 css 中设置了 div 的宽度到高度：100vh 和宽度：100% ...

如何将“外部”事件侦听器添加到 Google 地图中的标记（react-google-maps/api）

[英]How to add "outside" event listener to Markers in Google Maps (react-google-maps/api)

我有一个存储在state中的远足列表，我将这些远足的位置呈现为 Google Map 组件上的标记，如下所示： 我还在其自己的BusinessCard组件中显示了远足列表及其其他详细信息，如下所示： 当我在每个BusinessCard组件上 hover 时，我希望相应的标记为“反弹”设置动画。 我 ...

单击更改标记为 label

[英]Change marker with label on click

我正在使用 React 谷歌地图来渲染带有标记的 map。 如何在点击时更改标记的图标 / html？ 单击时会触发 markerClick 事件，但我无法更改图标。 对于前者，我想在单击时将 classes.grey 图像更改为不同的 class 但仅针对单击的标记。 有任何想法吗？ 编辑： ...

如何在打开谷歌地图之前询问地理位置？

[英]How to ask about geolocation right before opening google maps?

我是一名初级前端，从事 React 项目，您可以在其中发布包含信息和谷歌 map 位置的工作机会。 组件如何工作？ 当我单击<GoogleMap/>组件时，会显示一个警告“www...想知道您的位置，允许/拒绝”。 在允许或拒绝我的位置后，我需要再次单击 map 以在新选项卡中打开 ...

如何在@react-google-maps/api 中添加自定义 ico 或 SVG 作为标记图标

[英]How to add custom ico or SVG as marker icon in @react-google-maps/api

我正在使用@react-google-maps/api在我的 React Web 应用程序中显示 Google Map。 根据他们的文档，我添加了如下标记。 但它似乎不起作用。 没有显示任何标记。 使用google.maps.SymbolPath.CIRCLE作为path将显示标记图标。 以前有人遇 ...

使用反应测试库测试反应谷歌地图 useJsApiLoader

[英]testing react google maps useJsApiLoader using react testing library

我有这个基本组件，但每当我尝试使用 React 测试库对其进行测试时，屏幕上唯一出现的就是带有“正在加载”文本的div 。 我认为这是因为第一次加载组件时isLoaded可能没有值。 我如何告诉 React 测试库等待isLoaded为true以便它可以在页面上找到其他元素？import { ...

反应谷歌 Map Fitbounds 不是 function 错误

[英]React Google Map Fitbounds not a function error

每当我使用 map.fitbound 时，我都会收到 Uncaught TypeError: map.fitBounds is not a function。 重要的代码片段： 我不确定我做错了什么。 边界变量似乎与这些位置配合得很好，只是 map 不知何故没有 fitbound function， ...

在反应js（功能组件）中更改hover上的多边形颜色

[英]Change polygon color on hover in react js (functional component)

我在谷歌 map 上显示多个多边形，并想更改 hover 上多边形的颜色。 我正在使用基于功能的组件。 这就是我的代码的样子： 它被称为 hover 多边形代码 当我在多边形上 hover 时，它显示错误： “未捕获的 TypeError：polygon.setOptions 不是函数” 代码沙盒 ...