使用React导入Google Maps API JS文件
React是一个流行的JavaScript库，用于构建用户界面。它提供了一种声明式的编程模型，使开发者能够轻松地构建可复用的组件。
Google Maps API是一组用于在网页上显示地图、地理位置和相关数据的服务。它提供了丰富的功能，包括地图显示、地理编码、路线规划、地点搜索等。
要在React中导入Google Maps API JS文件，可以按照以下步骤进行操作：
- 在项目中安装React和相关依赖：
- 在项目中安装React和相关依赖：
- 在项目中创建一个新的React组件，例如
MapComponent。 - 在
MapComponent组件中，使用react-google-maps库来导入Google Maps API JS文件。这个库提供了React组件，用于在React应用中使用Google Maps API。 - 首先，安装
react-google-maps库： - 首先，安装
react-google-maps库： - 然后，在
MapComponent组件中导入所需的组件： - 然后，在
MapComponent组件中导入所需的组件： - 在
MapComponent组件的render方法中，使用LoadScript组件来加载Google Maps API JS文件，并在加载完成后渲染GoogleMap组件： - 在
MapComponent组件的render方法中，使用LoadScript组件来加载Google Maps API JS文件，并在加载完成后渲染GoogleMap组件： - 在上面的代码中，需要将
YOUR_API_KEY替换为你自己的Google Maps API密钥。还可以通过libraries属性导入其他Google Maps API库，例如places库用于地点搜索。
以上就是在React中导入Google Maps API JS文件的基本步骤。通过使用react-google-maps库，可以方便地在React应用中集成Google Maps功能，并根据具体需求进行定制和扩展。
腾讯云提供了一系列与地图相关的产品和服务，例如腾讯位置服务（Tencent Location Service），可以帮助开发者在应用中使用地图、定位和导航功能。你可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云地图相关产品的信息。
相关·内容
2回答
如何获得地图[getZoom()]的当前缩放反应-谷歌地图？
reactjs、google-maps、react-google-maps
我想让我的地图的当前缩放级别的反应-谷歌-地图，就像我们在简单的谷歌地图api与getZoom()功能。如何在反应中做到这一点-谷歌地图？
我找了几个答案，但没有一个是为我工作的。
import React from "react"
import {
GoogleMap,
Marker,
withGoogleMap,
withScriptjs,
} from "react-google-maps"
const Map = () => {
return (
<GoogleMap
defaultZoom={15
浏览 0提问于2019-06-20得票数 3
回答已采纳
1回答
Gatsby/Contentful将数据从一个组件传递到另一个组件
javascript、reactjs、gatsby
我正在尝试Gatsby、Contentful和Google Maps。这是我正在处理的页面： import React, { useState } from 'react'
import Layout from '../components/Layout'
import { withGoogleMap, withScriptjs } from 'react-google-maps'
import Map from '../components/Map'
import 'react-responsive-modal/sty
浏览 18提问于2021-01-11得票数 1
2回答
使用React更新基于地理位置的Google地图
reactjs、google-maps、geolocation、react-google-maps
我试图显示Google，并根据地理位置返回的纬度和经度对地图进行居中。但是，映射显示为默认值，而不是由地理位置值呈现。我在组件状态中设置了纬度和经度，并试图在状态更新后重新呈现组件。但不起作用。下面是我的密码。
MapView.js
import React, { Component } from 'react'
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'
import MapComponent from './MapComponen
浏览 0提问于2018-06-10得票数 3
回答已采纳
1回答
react google-移动地图上的街道视图
reactjs、google-maps、react-google-maps
我在我的应用程序中实现了react google地图包。一切都很好，但当我在手机上查看网站并进入街景时，默认情况下会打开一些选项，这使得地图能够在移动时掉头。默认情况下，此选项是打开的。右角有一个小小的移动图标，如果我按下它，它就会被关闭，在街景下移动的唯一方法就是用手指。当有人进入街景时，我如何使手指的“正常”动作成为默认动作？
编辑:添加示例
import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow, } from 'react-google-maps'
import Image from
浏览 0提问于2018-07-03得票数 1
1回答
不想重新呈现，即使状态在react中被更改-google-map
javascript、reactjs、redux、react-hooks、react-google-maps
我正在使用一个应用程序，它显示带有的Google地图，它安装了多个引脚，状态通过滚动进行更改，并且活动航班根据状态变化。
当时，Google地图的中心被设置为一种活动，但是当状态发生变化时，会重新呈现Google地图。我不知道如何防止渲染。
。它使用react谷歌地图，并使用钩子实现。我试图用useEffect ()返回false，但没有听到它的原样。请告诉我
MapComponent(专案)
import React from "react";
import { withGoogleMap, GoogleMap, withScriptjs, Marker, Info
浏览 3提问于2020-03-27得票数 0
1回答
如何将反应性多边形元素转换为google.maps.Polygon元素
javascript、reactjs、google-maps
我使用@react-google-maps/api库。我想要区分一下地图上的点击是否在多边形内。我的地图如下所示：
const libraries = ["geometry"];
const Map = ({ onClick, paths }) => {
const handleClick = () => {
const { PolyGeometry } = window;
const { latLng } = event;
console.log(PolyGeometry.containsLocation(p, latLng));
浏览 2提问于2020-12-17得票数 1
回答已采纳
1回答
Google react google- map API
reactjs、google-maps
我是新来的地图，我需要实现一条路线，并获得距离。我正在使用react-google-maps API，我找到了这样的方式来显示地图和路线。
这是我第一次构建这样的组件，现在我不知道如何访问类组件之外的数据。基本上，我希望将搜索框(坐标)中的数据添加到DirectionService.route中的原点，并获得距离。你知道我怎么才能访问这些数据吗？
我一直在读到componentWillMount被反对了，但这是我让它成功的唯一方法，如果你有什么建议，我很乐意尝试。
import React from 'react'
import { compose, withProps,
浏览 2提问于2020-12-13得票数 0
回答已采纳
1回答
在React地图中创建自定义按钮
javascript、reactjs、google-maps、react-google-maps
目前，我正在使用react-google-maps进行一个个人项目，在地图上显示自定义按钮时遇到了困难。我想要创建一个菜单按钮，在地图上盘旋，就像的左上角(搜索栏)。
根据的意思，您必须创建一个div，并使用下面的命令将其放在地图的特定一侧。
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(<div>);
但是，我不能让它很好地与React一起工作，因为Google文档都是普通的js。哪里是放置这一行代码的好地方？我知道在香草js里你几乎可以把它放在任何地方。
我还查看了，但似乎这个特定的用例并不是在API中实
浏览 0提问于2020-05-18得票数 4
1回答
onclick后刷新react-google-maps地图
reactjs、react-google-maps
我在地图组件中使用react-google-maps，每当我点击一个标记时，就会发生两件奇怪的事情。首先，有两个InfoWindow的窗口，一个是空白的，另一个是我的div。此外，每当执行onclick时，地图都会刷新，这不是我想要的。我正在从App.js调用我的地图组件。
import React, { useState, Component } from'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from "react-google-maps";
浏览 4提问于2020-05-05得票数 0
2回答
如何使用react-google-maps组件绘制路线？
javascript、reactjs、routes、react-google-maps
我试图用react-google-maps在两个点之间画一条路线，但对我不起作用。你能帮我解决这个问题吗？下面是我的react组件的一个示例。
import React from 'react';
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
} from 'react-google-maps';
import MapDirectionsRenderer from './app_map_directions_render';
const Map = withSc
浏览 0提问于2019-03-30得票数 5
回答已采纳
4回答
react-google-maps "'google‘未定义“错误
reactjs、google-maps
我正在创建一个使用react-google-maps的web，我收到了一堆未定义的错误。我是react/js世界的新手，所以任何帮助都将不胜感激。下面是确切的错误：
Failed to compile.
./src/App.js
Line 23: 'lifecycle' is not defined no-undef
Line 25: 'google' is not defined no-undef
Line 28: 'google' is not defined no-undef
Line 29: &
浏览 0提问于2018-05-27得票数 14
1回答
不能在启示录中使用道具
javascript、reactjs、google-maps
是新的反应，我设法添加谷歌地图到我的项目。
google包使用重新组合的问题，但是当我在里面调用道具时，我的数据道具是空的：
我的地图：
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
const MyMapComponent = compose(
withProps({
googleMapURL: "https://maps.go
浏览 0提问于2018-07-24得票数 1
回答已采纳
3回答
react google-map:找不到名称空间“google”
reactjs、google-maps、typescript
我试图使用这个库"react-google-maps"在我的应用程序中显示谷歌地图。在遵循了github页面上的教程之后，我在第一次运行时就得到了这个错误(这是一个创建反应应用程序+类型记录应用程序)：
我有点迷路了。就像以前有人用过这个图书馆一样？这是我的代码：
import * as React from 'react';
import { GoogleMap, Marker, withGoogleMap, withScriptjs } from 'react-google-maps';
import { compose, with
浏览 0提问于2018-02-13得票数 10
1回答
react google-映射重新组合错误--“不是一个函数”
javascript、reactjs、react-google-maps
我是一个错误，当试图运行一个顶级定义的反应-谷歌地图组件。(0 , _reactGoogleMaps.withProps) is not a function
下面是我的代码()：
import * as React from 'react'
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
withProps,
withState,
withHandlers
} from "react-google-maps";
import { compose } from '
浏览 3提问于2018-07-08得票数 2
回答已采纳
1回答
如何在react中使用containsLocation -google-map/api库
javascript、reactjs、google-maps、google-maps-api-3
我使用react-google-maps/api来处理React中的地图。我有一个多边形在我的地图上，我想检查每个点击事件，如果点击发生在内部或外部的多边形。
import React from "react";
import { LoadScript, GoogleMap, Polygon } from "@react-google-maps/api";
export default function App() {
const paths = [
{ lat: 52.52549080781086, lng: 13.39811853885
浏览 3提问于2020-12-16得票数 3
回答已采纳
4回答
google已经出现在react应用程序中了。
reactjs、api、key
"google已经发布了“
1.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GOOGLE API KEY0&libraries=places"></script>
<script>
function init() {
var options = {
types: ['(cities)'],
浏览 11提问于2020-09-06得票数 3
1回答
更新不同函数React的变量
javascript、reactjs
我在使用Local_Value更新地图组件的标记时遇到了问题。getMap()函数应该更新Local_Value的值，但它不会全局更新该值来更新标记。
如果有选项选择器(PO，CA)，getMap()函数将导入两个选项中的一个，并根据所选的选项更新local_Value。
地图组件是一个react-google-maps组件，它指向地图上的一个位置，当Local_Value更新时，该位置也会更改。(这是不能正常工作的部分)。
import React from "react";
import { compose, withProps } from "recompose&
浏览 2提问于2020-05-09得票数 0
1回答
react google地图"google还没有定义“
reactjs、undefined、react-google-maps
我在我的一个反应项目中使用react-google-maps。但我发现了一个错误：
google is not defined
我尝试过堆栈溢出的其他几种解决方案，但没有一种适合我。这是我的密码：
/* global google */
import React, { useState } from 'react'
import { GoogleMap, Marker, InfoWindow, HeatmapLayer, LoadScript } from '@react-google-maps/api';
import { markerPosition } f
浏览 11提问于2020-05-06得票数 1
回答已采纳
1回答
React:用于另一个组件的导出功能
reactjs、google-maps、google-places-api、googleplacesautocomplete
我正在我的盖茨比网站上建立谷歌地图与搜索框，将允许用户搜索他们的位置。我有一个Hero组件和一个Map组件，所有的功能都内置到Map组件中；Google、自动完成、Google等等。下面是它现在的样子：
Map.tsx
import React, { useState, useRef, useCallback } from 'react';
import { GoogleMap, useLoadScript, Marker, InfoWindow } from '@react-google-maps/api';
import * as dealersData f
浏览 8提问于2020-07-16得票数 0
回答已采纳
1回答
如何使用react-google-maps在React.JS中获取多边形的坐标
node.js、reactjs、mongoose、react-google-maps
我想获取在谷歌地图上绘制的多边形的所有坐标。下面是我的代码 import React from "react";
import { compose, withProps } from "recompose";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker
} from "react-google-maps";
//import withScriptjs from "react-google-maps/lib/async/withScriptjs";
浏览 21提问于2020-02-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
