@uiw/react-baidu-map-marker
Version:
Baidu Map map-marker Components for React.
132 lines (130 loc) • 4.79 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useMarker = useMarker;
var _reactBaiduMapMap = require("@uiw/react-baidu-map-map");
var _react = require("react");
var _reactBaiduMapUtils = require("@uiw/react-baidu-map-utils");
var _markers = require("./markers");
// import defaultIconUrl from './markers.png';
const getIcons = name => {
const icons = {
simple_red: new BMap.Icon(_markers.defaultIconUrl, new BMap.Size(42 / 2, 66 / 2), {
imageOffset: new BMap.Size(-454 / 2, -378 / 2),
anchor: new BMap.Size(42 / 2 / 2, 66 / 2)
}),
simple_blue: new BMap.Icon(_markers.defaultIconUrl, new BMap.Size(42 / 2, 66 / 2), {
imageOffset: new BMap.Size(-454 / 2, -450 / 2),
anchor: new BMap.Size(42 / 2 / 2, 66 / 2)
}),
loc_red: new BMap.Icon(_markers.defaultIconUrl, new BMap.Size(46 / 2, 70 / 2), {
imageOffset: new BMap.Size(-400 / 2, -378 / 2),
anchor: new BMap.Size(46 / 2 / 2, 70 / 2)
}),
loc_blue: new BMap.Icon(_markers.defaultIconUrl, new BMap.Size(46 / 2, 70 / 2), {
imageOffset: new BMap.Size(-400 / 2, -450 / 2),
anchor: new BMap.Size(46 / 2 / 2, 70 / 2)
}),
dot_red: new BMap.Icon(_markers.defaultIconUrl, new BMap.Size(16 / 2, 16 / 2), {
imageOffset: new BMap.Size(-216 / 2, -466 / 2),
anchor: new BMap.Size(16 / 2 / 2, 16 / 2)
}),
dot_blue: new BMap.Icon(_markers.defaultIconUrl, new BMap.Size(16 / 2, 16 / 2), {
imageOffset: new BMap.Size(-216 / 2, -486 / 2),
anchor: new BMap.Size(16 / 2 / 2, 16 / 2)
}),
start: new BMap.Icon(_markers.defaultIconUrl, new BMap.Size(50 / 2, 80 / 2), {
imageOffset: new BMap.Size(-400 / 2, -278 / 2),
anchor: new BMap.Size(50 / 2 / 2, 80 / 2)
}),
end: new BMap.Icon(_markers.defaultIconUrl, new BMap.Size(50 / 2, 80 / 2), {
imageOffset: new BMap.Size(-450 / 2, -278 / 2),
anchor: new BMap.Size(50 / 2 / 2, 80 / 2)
}),
location: new BMap.Icon(_markers.defaultIconUrl, new BMap.Size(28 / 2, 40 / 2), {
imageOffset: new BMap.Size(-248 / 2, -466 / 2),
anchor: new BMap.Size(28 / 2 / 2, 40 / 2)
})
};
for (let i = 1; i <= 10; i++) {
icons['red' + i] = new BMap.Icon(_markers.defaultIconUrl, new BMap.Size(42 / 2, 66 / 2), {
imageOffset: new BMap.Size(0 - 42 / 2 * (i - 1), 0),
anchor: new BMap.Size(42 / 2 / 2, 66 / 2)
});
}
for (let i = 1; i <= 10; i++) {
icons['blue' + i] = new BMap.Icon(_markers.defaultIconUrl, new BMap.Size(42 / 2, 66 / 2), {
imageOffset: new BMap.Size(0 - 42 / 2 * (i - 1), -132 / 2),
anchor: new BMap.Size(42 / 2 / 2, 66 / 2)
});
}
return icons[name];
};
function useMarker() {
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
const {
position,
animation,
offset,
icon,
enableMassClear,
enableDragging,
enableClicking,
raiseOnDrag,
draggingCursor,
rotation,
shadow,
title
} = props;
const {
map
} = (0, _reactBaiduMapMap.useMapContext)();
const [marker, setMarker] = (0, _react.useState)();
(0, _react.useEffect)(() => {
if (!BMap || !map) return _reactBaiduMapUtils.noop;
const options = {
offset,
icon,
enableMassClear,
enableDragging,
enableClicking,
raiseOnDrag,
draggingCursor,
rotation,
shadow,
title
};
const point = new BMap.Point(position.lng, position.lat);
const newMarker = new BMap.Marker(point, options);
map.addOverlay(newMarker);
newMarker.setAnimation(animation);
setMarker(newMarker);
return () => {
map.removeOverlay(newMarker);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [map]);
const [type, setType] = (0, _react.useState)(props.type || 'loc_blue');
/**
* 设置标注点 `图标`
*/
(0, _react.useEffect)(() => {
if (map && marker && !icon && type) {
const newIcon = getIcons(type);
newIcon.setImageSize(new BMap.Size(600 / 2, 600 / 2));
marker.setIcon(newIcon);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [type, marker]);
(0, _reactBaiduMapUtils.useVisiable)(marker, props);
(0, _reactBaiduMapUtils.useEventProperties)(marker, props, ['Click', 'DblClick', 'MouseDown', 'MouseUp', 'MouseOut', 'MouseOver', 'Remove', 'InfowindowClose', 'InfowindowOpen', 'DragStart', 'Dragging', 'DragEnd', 'RightClick']);
(0, _reactBaiduMapUtils.useEnableProperties)(marker, props, ['Dragging', 'MassClear', 'Clicking']);
(0, _reactBaiduMapUtils.useProperties)(marker, props, ['Icon', 'Position', 'Animation', 'Offset', 'Label', 'Title', 'Top', 'ZIndex', 'Rotation', 'Shadow']);
return {
marker,
setMarker,
type,
setType
};
}