@uiw/react-amap-marker
Version:
点标记是用来标示某个位置点信息的一种地图要素，本章介绍如何在地图图面使用点标记。
56 lines (55 loc) • 2.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useMarker = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = require("react");
var _reactAmapUtils = require("@uiw/react-amap-utils");
var _reactAmapMap = require("@uiw/react-amap-map");
var _excluded = ["visiable", "visible", "children"];
var useMarker = exports.useMarker = function useMarker() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var visiable = props.visiable,
visible = props.visible,
children = props.children,
other = (0, _objectWithoutProperties2["default"])(props, _excluded);
var _useMapContext = (0, _reactAmapMap.useMapContext)(),
map = _useMapContext.map;
var _useState = (0, _react.useState)(),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
marker = _useState2[0],
setMarker = _useState2[1];
var _usePortal = (0, _reactAmapUtils.usePortal)(),
container = _usePortal.container,
Portal = _usePortal.Portal;
(0, _react.useLayoutEffect)(function () {
if (map && !marker) {
if (props.children) {
other.content = container;
}
var instance = new AMap.Marker((0, _objectSpread2["default"])({}, other));
map.add(instance);
setMarker(instance);
return function () {
if (instance) {
// @fix [244] https://github.com/uiwjs/react-amap/issues/244
// typeof marker.remove === 'function' && marker.remove();
instance.setMap(null);
setMarker(undefined);
}
};
}
}, [map]);
(0, _reactAmapUtils.useVisiable)(marker, visible !== null && visible !== void 0 ? visible : visiable);
(0, _reactAmapUtils.useSettingProperties)(marker, props, ['Path', 'Anchor', 'Offset', 'Animation', 'Clickable', 'Position', 'Angle', 'Label', 'zIndex', 'Icon', 'Draggable', 'Cursor', 'Content', 'Map', 'Title', 'Top', 'Shadow', 'Shape', 'ExtData']);
(0, _reactAmapUtils.useEventProperties)(marker, props, ['onClick', 'onDblClick', 'onRightClick', 'onMouseMove', 'onMouseOver', 'onMouseOut', 'onMouseDown', 'onMouseUp', 'onDragStart', 'onDragging', 'onDragEnd', 'onMoving', 'onMoveEnd', 'onMoveAlong', 'onTouchStart', 'onTouchMove', 'onTouchEnd']);
return {
marker: marker,
setMarker: setMarker,
MarkerPortal: Portal
};
};