我想知道为什么我的404页面与我的地图发生冲突,即使我的404页面上没有地图。我有以下代码为我的Maps.js
:
import React from "react"
import MapMarker from "../assets/images/logos/map-marker.png"
if (typeof window !== 'undefined') {
window.initMap = function() {
const map = new window.google.maps.Map(document.getElementById('map'), {
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: 123.1463554, lng: 123.5245996 },
icon: MapMarker,
animation: window.google.maps.Animation.BOUNCE,
map: map
});
}
}
const Map = () => {
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"></div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Map
我的/pages/404.js
上有这个代码:
import React from "react"
import { Link } from "gatsby"
import ErrorImg from "../assets/images/header/404.png"
import Preloader from "../components/Preloader"
import Layout from "../components/Layout"
import PageBanner from "../components/PageBanner"
const Error = () => {
return (
<>
<Preloader />
<Layout>
<PageBanner title="404 Not Found" />
<div class="blog-section section-padding">
<div className="container">
<div className="row">
<div className="col-lg-12">
<img src={ErrorImg} className="d-block mx-auto" />
<h1 className="not-found text-center center-block mt-20">404 Not Found</h1>
<p className="text-center mt-20">It seems like you are lost. The page you were looking for doesn't exist, isn't available or was loading incorrectly. <br/>
Perhaps you can return back to the homepage and see if you can find what you are looking for. </p>
<div className="btn-group mt-30 d-flex justify-content-center align-content-center">
<Link data-wipe-normal="GO BACK TO HOMEPAGE" to="/">GO BACK TO HOMEPAGE</Link>
</div>
</div>
</div>
</div>
</div>
</Layout>
</>
)
}
export default Error
我想知道每当我访问404页面时,它总是返回这个:
×
Map: Expected mapDiv of type Element but was passed null.
▶ 3 stack frames were collapsed.
./src/components/Map.js.window.initMap
C:/Users/Rean/Desktop/gatsby/src/components/Map.js:6
3 |
4 | if (typeof window !== 'undefined') {
5 | window.initMap = function() {
> 6 | const map = new window.google.maps.Map(document.getElementById('map'), {
7 | center: {
8 | lat: 15.1463554,
9 | lng: 120.5245996
知道是什么原因造成的,如何解决它?这件事我想了很久了。请帮助
这是因为你从来没有卸载你的Map
组件,当你导航到另一个页面(不管那是404,它会发生在每个人身上),它抱怨那一行。因为所有的组件都共享路由,而且你的地图代码没有在组件内部呈现,所以当组件被丢弃时,它永远不会被卸载。
在你的代码中有一些问题。您正在直接攻击DOM,但是,您使用React的原因是生成虚拟DOM以避免这种高性能操作。像jQuery一样,真正的DOM操作对web性能影响很大。您可以使用一些钩子实现相同的结果。
把你的Map组件改成这样:
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: 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: 15.1463554, lng: 120.5245996 },
icon: MapMarker,
animation: window.google.maps.Animation.BOUNCE,
map: map
});
}
}
return () => map.current=null; // change it to map = null if don't work
}, [])
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
注意:很难猜测没有沙盒的代码将如何表现,但这是要遵循的方向。
使用useRef
钩子并应用一个有效的引用,您可以复制与document.getElementbyId
相同的行为,而无需指向真正的DOM。您的对象在map.current
内部(因为引用名称是map
)。最初设置为null
,以避免可能在React的rehydration中跨应用程序记忆引用。
useRef
钩子应用于useEffect
,空deps
([]
)。带有空依赖的useEffect
将在DOM树加载后被触发,因此这将确保您的引用在您请求它的那一刻被创建。
当组件自动卸载时,useEffect
末尾的返回语句将被触发,因此此时,您必须将引用设置回null