反应-google-地图"google is not defined"
react-google-maps "google is not defined"
我在我的一个 React 项目中使用 react-google-maps。但我收到此错误:
google is not defined
我尝试了 stack-overflow 的其他几种解决方案,但 none 对我有用。
这是我的代码:
/* global google */
import React, { useState } from 'react'
import { GoogleMap, Marker, InfoWindow, HeatmapLayer, LoadScript } from '@react-google-maps/api';
import { markerPosition } from "./MapData";
... // other code
const ExampleTraffic = (props) => {
... // other code
return (
<LoadScript
id="script-loader"
googleMapsApiKey="My Api Key"
region="BD"
libraries={libraries}
>
<GoogleMap
id='example-map'
mapContainerStyle={{ height: "100vh", width: "100vw" }}
zoom={13}
center={{
lat: 23.684994,
lng: 90.356331
}}
clickableIcons={true}
>
... // other code
<HeatmapLayer data={[
new google.maps.LatLng(22.862257, 22.862257),
new google.maps.LatLng(22.853746, 89.534611),
new google.maps.LatLng(22.847735, 89.537359),
new google.maps.LatLng(22.845773, 89.551920),
new google.maps.LatLng(22.861434, 89.534056),
new google.maps.LatLng(22.864945, 89.514299),
new google.maps.LatLng(22.868741, 89.527406),
new google.maps.LatLng(22.866369, 89.528873),
new google.maps.LatLng(22.857052, 89.547997),
new google.maps.LatLng(22.845172, 89.530171),
new google.maps.LatLng(22.854094, 89.562946),
new google.maps.LatLng(22.868963, 89.507291),
new google.maps.LatLng(22.871177, 89.547143),
new google.maps.LatLng(22.897430, 89.513818)
]}
/>
</GoogleMap>
</LoadScript >
);
}
export default ExampleTraffic;
我的代码有什么问题?任何帮助将不胜感激。
问题已通过使用
解决
new window.google.maps.LatLng(22.862257, 22.862257),
new window.google.maps.LatLng(22.853746, 89.534611),
而不是
new google.maps.LatLng(22.862257, 22.862257),
new google.maps.LatLng(22.853746, 89.534611),
我在我的一个 React 项目中使用 react-google-maps。但我收到此错误:
google is not defined
我尝试了 stack-overflow 的其他几种解决方案,但 none 对我有用。 这是我的代码:
/* global google */
import React, { useState } from 'react'
import { GoogleMap, Marker, InfoWindow, HeatmapLayer, LoadScript } from '@react-google-maps/api';
import { markerPosition } from "./MapData";
... // other code
const ExampleTraffic = (props) => {
... // other code
return (
<LoadScript
id="script-loader"
googleMapsApiKey="My Api Key"
region="BD"
libraries={libraries}
>
<GoogleMap
id='example-map'
mapContainerStyle={{ height: "100vh", width: "100vw" }}
zoom={13}
center={{
lat: 23.684994,
lng: 90.356331
}}
clickableIcons={true}
>
... // other code
<HeatmapLayer data={[
new google.maps.LatLng(22.862257, 22.862257),
new google.maps.LatLng(22.853746, 89.534611),
new google.maps.LatLng(22.847735, 89.537359),
new google.maps.LatLng(22.845773, 89.551920),
new google.maps.LatLng(22.861434, 89.534056),
new google.maps.LatLng(22.864945, 89.514299),
new google.maps.LatLng(22.868741, 89.527406),
new google.maps.LatLng(22.866369, 89.528873),
new google.maps.LatLng(22.857052, 89.547997),
new google.maps.LatLng(22.845172, 89.530171),
new google.maps.LatLng(22.854094, 89.562946),
new google.maps.LatLng(22.868963, 89.507291),
new google.maps.LatLng(22.871177, 89.547143),
new google.maps.LatLng(22.897430, 89.513818)
]}
/>
</GoogleMap>
</LoadScript >
);
}
export default ExampleTraffic;
我的代码有什么问题?任何帮助将不胜感激。
问题已通过使用
解决new window.google.maps.LatLng(22.862257, 22.862257),
new window.google.maps.LatLng(22.853746, 89.534611),
而不是
new google.maps.LatLng(22.862257, 22.862257),
new google.maps.LatLng(22.853746, 89.534611),