## DageMap 地图

### 基本用法

```tsx
import React, { useCallback, useState } from "react";
import { DageMap, DageMapLngLatChangeEvent } from "@dage/pc-components";
// 接口初始化
import "../../configure";

export default () => {
  const [position, setPosition] = useState([121.473581, 31.230536]);
  const [address, setAddress] = useState("上海市人民政府");

  const handleAddressChange = useCallback((val: string) => {
    setAddress(val);
  }, []);

  const handleLngLatChange = useCallback((data: DageMapLngLatChangeEvent) => {
    setPosition([data.lng, data.lat]);
  }, []);

  return (
    <DageMap
      city="上海"
      longitude={position[0]}
      latitude={position[1]}
      inputTipsApi="https://sit-shgybwg.4dage.com/api/cms/goods/mapSearch/"
      address={address}
      onLngLatChange={handleLngLatChange}
      onAddressChange={handleAddressChange}
    />
  );
};
```

### 仅限规定市区内范围搜索

设置 `onlyCityArea` 为 `true`，并且 `city` 值为 `number` 类型生效

```tsx
import React, { useCallback, useState } from "react";
import { DageMap, DageMapLngLatChangeEvent } from "@dage/pc-components";

export default () => {
  const [position, setPosition] = useState([121.473581, 31.230536]);
  const [address, setAddress] = useState("上海市人民政府");

  const handleAddressChange = useCallback((val: string) => {
    setAddress(val);
  }, []);

  const handleLngLatChange = useCallback((data: DageMapLngLatChangeEvent) => {
    setPosition([data.lng, data.lat]);
  }, []);

  return (
    <DageMap
      city={310000}
      onlyCityArea={true}
      outCityAreaMessage="请在上海市内搜索"
      longitude={position[0]}
      latitude={position[1]}
      inputTipsApi="https://sit-shgybwg.4dage.com/api/cms/goods/mapSearch/"
      address={address}
      onLngLatChange={handleLngLatChange}
      onAddressChange={handleAddressChange}
    />
  );
};
```

### 地图禁用

```tsx
import React, { useCallback, useState } from "react";
import { DageMap } from "@dage/pc-components";

export default () => {
  const [position, setPosition] = useState([121.473581, 31.230536]);
  const [address, setAddress] = useState("上海市人民政府");

  return (
    <DageMap
      inputTipsApi="/api/cms/goods/mapSearch/"
      disabled={true}
      longitude={position[0]}
      latitude={position[1]}
      address={address}
    />
  );
};
```

## API

<API hideTitle exports='["DageMap"]' src='@dage/pc-components/index.d.ts'></API>

## setAmapJSKey

修改高德地图 js-key

| Name        | Description  | Type     | Default      |
| ----------- | ------------ | -------- | ------------ |
| key         | JS-API key   | `string` | `(required)` |
| serviceHost | 安全密钥地址 | `string` | `--`         |

## getAmapInputTips

提供根据用户输入的关键词查询返回建议列表

| Name      | Description      | Type      | Default      |
| --------- | ---------------- | --------- | ------------ |
| value     | 关键字           | `string`  | `(required)` |
| city      | 搜索城市         | `string`  | `--`         |
| citylimit | 是否限制城市搜索 | `boolean` | `true`       |
