Closed hihuangwei closed 4 years ago
通过 getBounds
方法获取当前地图视图范围/可视区域。
上面方法会返回一个 Bounds
对象,获取两个角的经纬度
@hihuangwei 实例
import { React } from 'react';
import { Map, APILoader } from '@uiw/react-amap';
function Demo() {
return (
<div style={{ width: '100%', height: 330 }}>
<Map ref={(instance) => {
if (instance && instance.map) {
const bounds = instance.map.getBounds();
console.log('instance', bounds);
}
}} />
</div>
);
}
ReactDOM.render((
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
<Demo />
</APILoader>
), _mount_);
@jaywcjlove 写个 拖动 地图 停止获取 bounds 的实例可以吗
@hihuangwei 你拖动触发 Map 拖动事件标记一下,如果在拖动的时候不执行某个事件就好了
@jaywcjlove 希望大神来个demo,还是没明白怎么写。
@hihuangwei 刚好我在调试类型问题,顺带手给你写了个,https://codesandbox.io/s/gaodeditushili-20m4n?file=/src/Demo.js
setMapBounds(params) 即报错 @jaywcjlove
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
import React, { useEffect, useState } from 'react';
import { Map, APILoader } from '@uiw/react-amap';
const Page: React.FC<{}> = () => {
const [mapHeight, setMapHeight] = useState(900);
const { clientHeight } = document.documentElement;
const [mapBounds, setMapBounds] = useState({});
const [isGetInfo, setIsGetInfo] = useState(true);
useEffect(() => {
setMapHeight(clientHeight - 96);
}, []);
const getMapBounds = (bounds: any)=> {
const { northEast, southWest} = bounds;
const params = {
north_east_lng: northEast.lng,
north_east_lat: northEast.lat,
south_west_lng: southWest.lng,
south_west_lat: southWest.lat,
};
setMapBounds(params)
}
return (
<div style={{ width: '100%', height: `${mapHeight}px` }} >
<APILoader akay="11b6ad0b11de5b85b60c98e34c7af4f2">
<Map
center={[119.547815, 26.666116]}
zoom={17}
onMouseDown={() => setIsGetInfo(false)}
onMouseUp={() => setIsGetInfo(true)}
onClick={() => {
console.log(mapBounds);
}}
ref={(instance) => {
if (instance && instance.map && isGetInfo) {
const BoundsData = instance.map.getBounds();
getMapBounds(BoundsData);
}
}} />
</APILoader>
</div>
);
};
export default Page;
@hihuangwei 实例更新了一下 https://codesandbox.io/s/gaodeditushili-20m4n?file=/src/Demo.js
你对 hook 还不熟,你可以使用你熟悉的方法 来实现,还有个事件 onComplete
你可以实现。
@jaywcjlove 还是没达到我的需求,我的需求是 拖放结束,获取地图四周坐标,可以加你微信吗?我的微信 hihuangwei
@hihuangwei
你这个需求不是很简单就就能实现?稍微改了 https://codesandbox.io/s/gaodeditushili-20m4n?file=/src/Demo.js
import React, { useState } from "react";
import { Map, APILoader } from "@uiw/react-amap";
function Demo() {
const [bounds, setBounds] = useState();
return (
<div style={{ width: "100%", height: 330 }}>
<Map
onMouseUp={(evn) => {
if (evn && evn.target) {
setBounds(evn.target.getBounds());
}
}}
/>
<pre
style={{ textAlign: "left", padding: 10, backgroundColor: "#f6f8fa" }}
>
{bounds ? JSON.stringify(bounds, null, 2) : "拖拽获取"}
</pre>
</div>
);
}
export default () => (
<div>
<APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
<Demo />
</APILoader>
</div>
);
@jaywcjlove 还是希望做个和后台交互的demo,还是没完全整明白。后台数据拉取回来后,又回到了设定center
@hihuangwei 你找个专业前端帮你看看吧,我都给你改了几次了,不明白你的需求。
如何 获取 地图 边缘的经纬度