如何在React中使用@googlemaps/js-api加载器

Question

我想在React中使用Google Maps API。

我读了这篇文章，发现最近发布了一些软件包。

但我不知道，即使我看看这个例子。

如何在React中使用谷歌地图？我想拿一个标记，更改标记图标。

请帮帮我…

Answer 1

一定要明白有一些包可以帮助您加载Google Map和Javascript API，例如

• https://www.npmjs.com/package/google-map-react
• https://www.npmjs.com/package/@react谷歌地图/api

我以前使用过google-map-react，但现在我需要一种更灵活的方法来加载Google Maps JavaScript API脚本。

对于像我这样通过搜索如何在React中使用@googlemaps/js-api-loader而来到这里的人来说，这里有一些代码示例。

1. 安装npm软件包：npm i @googlemaps/js-api-loader
2. 代码示例：

import React, { Component } from 'react';
import { Loader } from '@googlemaps/js-api-loader';
const loader = new Loader({
apiKey: "YOUR_API_KEY"
version: "weekly",
libraries: ["places"]
});
export default class DemoComponent extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
let self = this;
const defaultMapOptions = {
center: {
lat: 40.762312,
lng: -73.979345
},
zoom: 11
};
loader.load().then((google) => {
const map = new google.maps.Map(
self.googleMapDiv,
defaultMapOptions);
/*
store them in the state so you can use it later
E.g. call a function on the map object:
this.state.map.panTo(...)
E.g. create a new marker:
new this.state.google.maps.Marker(...)
*/
this.setState({
google: google,
map: map
});
});
}
render() {
return (
<div
ref={(ref) => { this.googleMapDiv = ref }}
style={{ height: '100vh', width: '100%' }}>
</div>
)
}
}

Answer 2

您是否检查了此包及其文档：https://www.npmjs.com/package/@react谷歌地图/api

我用它在React功能组件中创建了一个谷歌地图。

还有其他的谷歌地图软件包。