index.js 1.95 KB
Newer Older
田翔's avatar
田翔 committed
1
import React, { useState, useEffect, useContext } from 'react'
2
import { Input, message } from 'antd'
田翔's avatar
田翔 committed
3 4
import { AMap } from '@wisdom-map/amap'

5 6
const SearchLocation = (props) => {
  const { value, onChange, name, schema, addons } = props
7
  const { disabled, placeholder, presetValue } = schema
8

田翔's avatar
田翔 committed
9
  const [extraData, setExtraData] = useState(null);
田翔's avatar
田翔 committed
10 11
  const [address, setAddress] = useState('');
  const [pos, setPos] = useState('');
12

田翔's avatar
田翔 committed
13 14 15 16
  const renderSearch = async () => {
    // 封装之后的AMap,如果需要使用高德地图上的方法,则需要按照如下方法去使用
    AMap.prototype.key = 'e83f64300a2a55a33fa8e4ab9a46bca6';
    let map = await AMap.prototype.loadLocaScript();
17
    map?.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function (e) {
田翔's avatar
田翔 committed
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
      let auto = new map.AutoComplete({
        input: 'searchInput'
      });
      auto.on('select', function (e) {
        if (e?.poi?.location?.pos?.length) {
          let _pos = e.poi.location.pos.join(',');
          setPos(_pos);
          setAddress(e.poi.name);
          let _extraData = extraData ? { ...extraData } : {};
          _extraData.pos = _pos;
          setExtraData(_extraData);
          onChange(e.poi.name);
        } else {
          setAddress('');
          setPos('');
          onChange('');
          message.error('当前地址无坐标,请重新选取')
        }
      });
    })
38 39 40 41 42 43 44 45 46
  }

  const inputChange = (e) => {
    if (addons) {
      setAddress(e.target.value)
      onChange(e.target.value)
    }
  }

47 48 49 50 51 52
  useEffect(() => {
    if (addons) {
      addons.setValue(addons.dataPath, presetValue)
    }
  }, [presetValue])

田翔's avatar
田翔 committed
53
  useEffect(() => {
54 55 56 57 58 59
    if (addons) {
      renderSearch()
    }
    // if (value) setAddress(value)
  }, [value])

田翔's avatar
田翔 committed
60
  return (
61 62 63 64 65 66 67 68
    <Input
      placeholder={placeholder}
      disabled={disabled}
      onChange={inputChange}
      id={addons ? 'searchInput' : null}
      value={value}
      style={{ width: '100%' }}
    />
田翔's avatar
田翔 committed
69 70 71
  )
}

72
export default SearchLocation