javascript - 未处理的拒绝(TypeError):无法读取未定义的属性“当前”
问题描述
我有一个使用 google maps api 的 gatsby 应用程序。我正在加载 useRef 和 useEffect 来加载地图。useRef 返回一个可变 ref 对象,其 .current 属性初始化为传递的参数 (initialValue)。返回的对象将在组件的整个生命周期内持续存在。这是我的代码:
import React, { useRef, useEffect } from "react"
import MapMarker from "../assets/images/logos/map-marker.png"
const Map = () => {
const map = useRef(null)
useEffect(()=>{
if(typeof window !== "undefined"){
window.initMap = function() {
const map = new window.google.maps.Map(map.current, {
center: {
lat: 142.1463554,
lng: 121.5245996
},
zoom: 10,
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#d3d3d3"},{"lightness":50}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":50},{"color":"#000000"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#4c4c4c"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#4c4c4c"},{"lightness":17},{"weight":1.2}]}]
})
new window.google.maps.Marker({
position: { lat: 112.1463554, lng: 130.5245993 },
icon: MapMarker,
animation: window.google.maps.Animation.BOUNCE,
map: map
});
}
}
return () => map.current = null
}, [])
return (
<div id="map-container" data-aos="fade-up">
<div className="container-fluid">
<div className="row">
<div className="col-lg-12 col-12 pl-0 pr-0">
<div className="google-map">
<div id="map" ref={map}></div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Map
当我加载我的 gatsby 应用程序时,它返回:
Unhandled Rejection (TypeError): Cannot read property 'current' of undefined
window.initMap
C:/Users/Read/Desktop/gatsby/src/components/Map.js:12
9 |
10 | if(typeof window !== "undefined"){
11 | window.initMap = function() {
> 12 | const map = new window.google.maps.Map(map.current, {
13 | center: {
14 | lat: 11.1463554,
15 | lng: 110.5245996
知道如何解决这个问题吗?请帮忙!
解决方案
您在访问参考时遇到命名问题,因为您map
和您的参考具有相同的名称,因此由于范围而导致此问题。将其更改为:
import React, { useRef, useEffect } from "react"
import MapMarker from "../assets/images/logos/map-marker.png"
const Map = () => {
const mapRef = useRef(null)
useEffect(()=>{
if(typeof window !== "undefined"){
window.initMap = function() {
const map = new window.google.maps.Map(mapRef.current, {
center: {
lat: 11.1463554,
lng: 110.5245996
},
zoom: 10,
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#d3d3d3"},{"lightness":50}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":50},{"color":"#000000"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#4c4c4c"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#4c4c4c"},{"lightness":17},{"weight":1.2}]}]
})
new window.google.maps.Marker({
position: { lat: 112.1463554, lng: 130.5245993 },
icon: MapMarker,
animation: window.google.maps.Animation.BOUNCE,
map: map
});
}
}
return () => mapRef.current = null
}, [])
return (
<div id="map-container" data-aos="fade-up">
<div className="container-fluid">
<div className="row">
<div className="col-lg-12 col-12 pl-0 pr-0">
<div className="google-map">
<div id="map" ref={mapRef}></div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Map
推荐阅读
- python - 熊猫数据框逐列
- python - 如何将我的 python 字典的每个键值对存储在 json 文件的单独行中?
- r - 如何在 R 中的 Openair 包中对 Back 轨迹聚类分析中的每个聚类重新编号和着色,以使它们一致?
- javascript - Prisma 忽略一对多自关系中的 gql 外键错误
- css - UserChrome.css 如何将 [sizemode="normal"] 与 :-moz-window-inactive 合并?
- python - ValueError:时间数据“2021-11-05 10:13:46+11:00”与格式“%y-%m-%d %H:%M:%S%z”不匹配
- rust - 有没有一种简单的方法来计算 Rust 中的布尔值?
- flutter - 如果 UI 由于性能不佳而丢失帧,Flutter Ticker 会发生什么?
- r - Computing an R function with while loop
- python - 在 Robot Framework 中将 python 文件作为关键字运行时遇到问题