如何解决如何在React中自动滚动Google Map视图?
使用google-map-react包,我在TypeScript中创建了一个MapView
组件,如下所示。
export function MapView<I extends Mappable>({ getData }: MapViewProps<I>): JSX.Element {
const [mapZoom,setMapZoom] = useState(5);
const [mapBounds,setMapBounds] = useState<[number,number,number]>([-1,-1,-1]);
return (
<div className="map-container">
<GoogleMapReact
bootstrapURLKeys={{ key: "API_KEY" }}
defaultCenter={{
lat: 39.381266,lng: -97.922211,}}
zoom={mapZoom}
options={{ maxZoom: 10 }}
onChange={({ zoom,bounds }) => {
setMapZoom(zoom);
setMapBounds([bounds.nw.lng,bounds.se.lat,bounds.se.lng,bounds.nw.lat]);
}}
/>
</div>
);
}
如果用户尚未触摸地图,我想使地图缓慢地水平滚动。我的第一个想法是添加一个useEffect
来自动更新边界,但这似乎并不理想。有什么想法吗?
解决方法
在地图加载时,您可以放置一个函数,使地图的中心每秒变化一次。您可以使用Maps JavaScript Geometry Library's compute offset
以90度方向从指定距离获取坐标,以使其看起来像是向右水平滚动。您可以更改标题的值,以从所需的不同方向获取中心。您还需要确保设置的距离在当前缩放级别的当前地图范围内。这是我使用的sample code,没有使用react库。请使用您的API密钥来使示例工作。
代码段:
class App extends Component {
render() {
return (
<Map
id="myMap"
options={{
center: { lat: 41.0082,lng: 28.9784 },zoom: 5
}}
onMapLoad={map => {
setInterval(function() {
let currentCenter = map.getCenter();
let spherical = google.maps.geometry.spherical;
let newLat = spherical.computeOffset(currentCenter,500000,90);
let newCenter= new google.maps.LatLng(newLat.lat(),newLat.lng());
map.setCenter(newCenter);
},1000);
}}
/>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。