如何 获取 地图 边缘的经纬度

[hihuangwei]

如何 获取 地图 边缘的经纬度

[jaywcjlove]

通过 getBounds 方法获取当前地图视图范围/可视区域。

https://github.com/uiwjs/react-amap/blob/b92e373f4a39749a6c2b4b6d0b4dfe5b62f8489a/src/types/core.d.ts#L28-L32

上面方法会返回一个 Bounds 对象，获取两个角的经纬度

https://github.com/uiwjs/react-amap/blob/b92e373f4a39749a6c2b4b6d0b4dfe5b62f8489a/src/types/base.d.ts#L81-L108

[jaywcjlove]

@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_);

[hihuangwei]

@jaywcjlove 写个 拖动 地图 停止获取 bounds 的实例可以吗

[jaywcjlove]

@hihuangwei 你拖动触发 Map 拖动事件标记一下，如果在拖动的时候不执行某个事件就好了

[hihuangwei]

@jaywcjlove 希望大神来个demo，还是没明白怎么写。

[jaywcjlove]

@hihuangwei 刚好我在调试类型问题，顺带手给你写了个，https://codesandbox.io/s/gaodeditushili-20m4n?file=/src/Demo.js

[hihuangwei]

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;

[jaywcjlove]

@hihuangwei 实例更新了一下 https://codesandbox.io/s/gaodeditushili-20m4n?file=/src/Demo.js

你对 hook 还不熟，你可以使用你熟悉的方法 来实现，还有个事件 onComplete 你可以实现。

[hihuangwei]

@jaywcjlove 还是没达到我的需求，我的需求是 拖放结束，获取地图四周坐标，可以加你微信吗？我的微信 hihuangwei

[jaywcjlove]

@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>
);

[hihuangwei]

@jaywcjlove 还是希望做个和后台交互的demo，还是没完全整明白。后台数据拉取回来后，又回到了设定center

[jaywcjlove]

@hihuangwei 你找个专业前端帮你看看吧，我都给你改了几次了，不明白你的需求。