@51yzone/pc-components/es/place-search/place-search.js

An enterprise-class UI design language and React-based implementation

import "antd/es/input/style";
import _Input from "antd/es/input";
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useEffect, useState } from 'react';
import Map from './map'; // 地图实例

var map;
var AMap;
var geocoder;
var infoWindow;
var placeSearch; // 清除定位的marker

function clearMarker() {
  map.remove(map.getAllOverlays('marker'));

  if (infoWindow) {
    infoWindow.close();
  }
}

var PlaceSearch = function PlaceSearch(props) {
  var value = props.value,
      infoWindowProps = props.infoWindowProps,
      initSearchVal = props.initSearchVal,
      searchVal = props.searchVal,
      city = props.city,
      placeSearchProps = props.placeSearchProps,
      autoCompleteProps = props.autoCompleteProps,
      showSearch = props.showSearch,
      autoComplete = props.autoComplete,
      prefixCls = props.prefixCls,
      style = props.style,
      className = props.className,
      onChange = props.onChange,
      onMapClick = props.onMapClick; // 初始化变量

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      init = _useState2[0],
      setInit = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      visible = _useState4[0],
      setVisible = _useState4[1]; // 搜索value


  var _useState5 = useState(''),
      _useState6 = _slicedToArray(_useState5, 2),
      _searchVal = _useState6[0],
      setSearchVal = _useState6[1]; // 输入框搜索


  var handleSearch = function handleSearch(_value, _city) {
    setVisible(_value !== '');
    clearMarker();

    if (_value && placeSearch) {
      console.log("\u5F00\u59CB\u5728".concat(_city, "\u4E2D\u641C\u7D22:").concat(_value));
      setSearchVal(_value);
      placeSearch.setCity(_city);
      placeSearch.search(_value);
    }
  }; // 输入框改变


  var handleChange = function handleChange(e) {
    setSearchVal(e.currentTarget.value);
  }; // 创建搜索对象


  useEffect(function () {
    if (init) {
      AMap.service(['AMap.PlaceSearch'], function () {
        placeSearch = new AMap.PlaceSearch(_extends({
          citylimit: true,
          pageSize: 10,
          children: 0,
          pageIndex: 1,
          extensions: 'base',
          panel: 'place-search-panel',
          // 结果列表将在此容器中进行展示
          map: map
        }, placeSearchProps));
        AMap.event.addListener(placeSearch, 'selectChanged', function (res) {
          onChange && onChange(res.selected.data);
        });
      });
      AMap.plugin(['AMap.Geocoder'], function () {
        geocoder = new AMap.Geocoder({
          city: city
        });
      });

      if (showSearch && autoComplete) {
        AMap.plugin(['AMap.Autocomplete'], function () {
          var auto = new AMap.Autocomplete(_extends({
            input: 'place-search-input',
            citylimit: true
          }, autoCompleteProps));
          AMap.event.addListener(auto, 'select', function (e) {
            handleSearch(e.poi.name, e.poi.adcode);
          }); // 注册监听，当选中某条记录时会触发
        });
      }
    }
  }, [init]); // 地图点击事件

  var handleMapClick = function handleMapClick(_ref) {
    var lnglat = _ref.lnglat;
    if (!onMapClick) return;
    var lng = lnglat.lng,
        lat = lnglat.lat;
    geocoder.getAddress([lng, lat], function (status, result) {
      if (status === 'complete') {
        clearMarker();
        setVisible(false);
        setSearchVal('');
        onMapClick([lng, lat], result.regeocode.formattedAddress, result);
      }
    });
  }; // 监听初始值搜索


  useEffect(function () {
    if (initSearchVal && !_searchVal && city && init) {
      handleSearch(initSearchVal, city);
    }
  }, [initSearchVal, init, city]); // 监听受控搜索

  useEffect(function () {
    if (searchVal && city && init) {
      handleSearch(searchVal, city);
    }
  }, [searchVal, init, city]);
  return /*#__PURE__*/React.createElement("div", {
    className: "place-search-wrapper"
  }, /*#__PURE__*/React.createElement(Map, _extends({
    value: value,
    infoWindowProps: infoWindowProps
  }, {
    prefixCls: prefixCls,
    style: style,
    className: className
  }, {
    getMapInstance: function getMapInstance(mapInstance, NDMap, _infoWindow) {
      map = mapInstance;
      AMap = NDMap;
      infoWindow = _infoWindow;
      setInit(true);
    },
    onMapClick: handleMapClick
  })), /*#__PURE__*/React.createElement("div", {
    className: "place-search-bar"
  }, showSearch && /*#__PURE__*/React.createElement(_Input.Search, {
    enterButton: "\u641C\u7D22",
    value: _searchVal,
    id: "place-search-input",
    onChange: handleChange,
    onSearch: function onSearch(val) {
      return handleSearch(val, city);
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      display: visible ? 'block' : 'none'
    },
    id: "place-search-panel"
  })));
};

PlaceSearch.defaultProps = {
  initSearchVal: '',
  city: '全国',
  placeSearchProps: {},
  autoCompleteProps: {},
  showSearch: false,
  autoComplete: false,
  prefixCls: 'yz-map',
  className: '',
  style: {}
};
export default PlaceSearch;