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

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";

var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
  function adopt(value) {
    return value instanceof P ? value : new P(function (resolve) {
      resolve(value);
    });
  }

  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    }

    function rejected(value) {
      try {
        step(generator["throw"](value));
      } catch (e) {
        reject(e);
      }
    }

    function step(result) {
      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    }

    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
};
/**
 * 关键字：地图
 * 新增人：徐友万
 * 完善中
 */


import React, { useEffect, useState } from 'react';
import ReactMap, { PlatformType } from '@gem-mine/rc-map';
import jsAsyncLoader from '@gem-mine/js-async-loader';
import classnames from 'classnames';
import { MAP_KEY } from '../constants/cache'; // 地图实例

var map;
var AMap; // 创建信息窗体

var infoWindow;

var createInfoWindow = function createInfoWindow(_ref) {
  var title = _ref.title,
      address = _ref.address;
  var content = "<div class='info-window-wrap'>\n      <h4 class='info-window-title'>".concat(title, "</h4>\n      <p class='info-window-input-item'>\n        <span class='label'>\u5730\u5740\uFF1A</span>\n        <span class='value'>").concat(address, "</span>\n      </p>\n    </div>");
  infoWindow = new AMap.InfoWindow({
    content: content,
    offset: new AMap.Pixel(0, -40)
  });
}; // 创建marker


var createMarker = function createMarker(position) {
  var marker = new AMap.Marker({
    position: position,
    icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
    map: map,
    animation: 'AMAP_ANIMATION_DROP'
  });
  infoWindow.open(map, marker.getPosition());
  AMap.event.addListener(marker, 'click', function () {
    infoWindow.open(map, marker.getPosition());
  });
  marker.setMap(map);
};

var Map = function Map(props) {
  if (!(window._AMapSecurityConfig && window._AMapSecurityConfig.securityJsCode)) {
    console.warn('请使用项目securityJsCode！');
    window._AMapSecurityConfig = {
      securityJsCode: '6a588873fd8dc0f263e4d360a550b350'
    };
  }

  var value = props.value,
      infoWindowProps = props.infoWindowProps,
      prefixCls = props.prefixCls,
      style = props.style,
      className = props.className,
      getMapInstance = props.getMapInstance,
      onMapClick = props.onMapClick; // 初始化变量

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      init = _useState2[0],
      setInit = _useState2[1]; // 定位到传入的经纬度位置


  useEffect(function () {
    if (init && value && value.length) {
      console.log('地图初始化完成，且接收到center:', value);

      if (infoWindowProps && infoWindowProps.address) {
        createInfoWindow(infoWindowProps);

        if (getMapInstance) {
          getMapInstance(map, AMap, infoWindow);
        }
      }

      map.panTo(value);
      createMarker(value);
    }
  }, [value, init, infoWindowProps]);
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(className, "".concat(prefixCls, "-wrapper")),
    style: style
  }, /*#__PURE__*/React.createElement(ReactMap, {
    setComponentInstance: function setComponentInstance(mapInstance, NDMap) {
      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return jsAsyncLoader('//webapi.amap.com/ui/1.1/main.js?v=1.1.1');

              case 2:
                _context.next = 4;
                return jsAsyncLoader('//webapi.amap.com/ui/1.1/plug/ext/jquery-1.12.4.min.js?v=1.1.1');

              case 4:
                map = mapInstance;
                AMap = NDMap; // 点击事件

                map.on('click', onMapClick);
                createInfoWindow(infoWindowProps);

                if (getMapInstance) {
                  getMapInstance(mapInstance, NDMap, infoWindow);
                }

                setInit(true);

              case 10:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));
    },
    mapOptions: {
      minZoom: 4,
      maxZoom: 18,
      zoom: 15
    },
    style: {
      height: '100%'
    },
    sdkUrlParams: {
      key: window._AMapKey || MAP_KEY
    },
    platformType: PlatformType.GAODE
  }));
};

Map.defaultProps = {
  infoWindowProps: {
    title: '',
    address: ''
  },
  prefixCls: 'yz-map',
  className: '',
  style: {}
};
export default Map;