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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

require("antd/lib/input/style");

var _input = _interopRequireDefault(require("antd/lib/input"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _map = _interopRequireDefault(require("./map"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// 地图实例
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 = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      init = _useState2[0],
      setInit = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
      visible = _useState4[0],
      setVisible = _useState4[1]; // 搜索value


  var _useState5 = (0, _react.useState)(''),
      _useState6 = (0, _slicedToArray2["default"])(_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);
  }; // 创建搜索对象


  (0, _react.useEffect)(function () {
    if (init) {
      AMap.service(['AMap.PlaceSearch'], function () {
        placeSearch = new AMap.PlaceSearch((0, _extends2["default"])({
          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((0, _extends2["default"])({
            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);
      }
    });
  }; // 监听初始值搜索


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

  (0, _react.useEffect)(function () {
    if (searchVal && city && init) {
      handleSearch(searchVal, city);
    }
  }, [searchVal, init, city]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "place-search-wrapper"
  }, /*#__PURE__*/_react["default"].createElement(_map["default"], (0, _extends2["default"])({
    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["default"].createElement("div", {
    className: "place-search-bar"
  }, showSearch && /*#__PURE__*/_react["default"].createElement(_input["default"].Search, {
    enterButton: "\u641C\u7D22",
    value: _searchVal,
    id: "place-search-input",
    onChange: handleChange,
    onSearch: function onSearch(val) {
      return handleSearch(val, city);
    }
  }), /*#__PURE__*/_react["default"].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: {}
};
var _default = PlaceSearch;
exports["default"] = _default;