javascript - 使用 ReactJS 更新标记而不更新 Google 地图中心
问题描述
我正在使用react-google-maps v9.4.5
图书馆。当我更新标记时,地图的中心也会更新。如何在不影响地图的情况下更新标记?
我已经尝试过使用 redux 并更新状态。
我从这里尝试了这个例子:https ://codesandbox.io/s/qzj7qp4p2w?file=/src/Map.js
但它无法识别我在 Markers.js 中使用的变量google
GoogleMaps.js
import React from "react";
import {
withGoogleMap,
GoogleMap,
Marker,
withScriptjs
} from "react-google-maps";
import Markers from "./Markers";
class GoogleMaps extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<GoogleMap
zoom={this.props.zoom}
center={this.props.center}>
//My own component
<Markers markers={this.props.markers}/>
</GoogleMap>
);
}
}
export default withScriptjs(withGoogleMap(GoogleMaps));
Markers.js
import React from "react";
import {
Marker,
} from "react-google-maps";
export default function Markers(props) {
const google = window.google;
return (
<>
{
props.markers.map((marker, index) => (
<Marker
key={index} position={{lat: marker.lat, lng: marker.lng}}
icon={{
url: marker.icon,
size: new google.maps.Size(32, 32),
}}
/>
))
}
</>
);
}
谢谢您的帮助。
解决方案
这是我的错,只需替换center
它就defaultCenter
可以了。
推荐阅读
- node.js - 在 Google Cloud Standard App Engine 中直接推送 .env 文件的缺点
- reactjs - Reactjs Redux applymiddleware没有调用?
- c++ - 如何从 C++17 编写的代码中导出 C++03 的 abi
- javascript - 通过过滤在数组中查找匹配数据
- python - 使用 win32com 的 CANoe 多个实例
- android - dataSet.createDataPoint().setTimeInterval() 已被弃用 Fitness History API
- c# - Http Client 无法从传输连接中读取数据:现有连接被远程主机强行关闭
- python - 当 python 脚本转换为 exe 时,来自网络驱动器的图像不会显示
- java - java.lang.OutOfMemoryError:使用 TransferManager 将大文件上传到 Amazon AWS S3 存储桶时的 Java 堆空间
- java - 我可以在 java-11 spring boot 2 项目中使用 java-8 编译的项目/库吗?