@uiw/react-baidu-map-marker
Version:
Baidu Map map-marker Components for React.
127 lines • 4.42 kB
JavaScript
import { useMapContext } from '@uiw/react-baidu-map-map';
import { useEffect, useState } from 'react';
// import defaultIconUrl from './markers.png';
import { noop, useEnableProperties, useEventProperties, useProperties, useVisiable } from '@uiw/react-baidu-map-utils';
import { defaultIconUrl } from './markers';
var getIcons = name => {
var icons = {
simple_red: new BMap.Icon(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(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(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(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(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(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(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(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(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 (var i = 1; i <= 10; i++) {
icons['red' + i] = new BMap.Icon(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 (var _i = 1; _i <= 10; _i++) {
icons['blue' + _i] = new BMap.Icon(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];
};
export function useMarker(props) {
if (props === void 0) {
props = {};
}
var {
position,
animation,
offset,
icon,
enableMassClear,
enableDragging,
enableClicking,
raiseOnDrag,
draggingCursor,
rotation,
shadow,
title
} = props;
var {
map
} = useMapContext();
var [marker, setMarker] = useState();
useEffect(() => {
if (!BMap || !map) return noop;
var options = {
offset,
icon,
enableMassClear,
enableDragging,
enableClicking,
raiseOnDrag,
draggingCursor,
rotation,
shadow,
title
};
var point = new BMap.Point(position.lng, position.lat);
var 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]);
var [type, setType] = useState(props.type || 'loc_blue');
/**
* 设置标注点 `图标`
*/
useEffect(() => {
if (map && marker && !icon && type) {
var 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]);
useVisiable(marker, props);
useEventProperties(marker, props, ['Click', 'DblClick', 'MouseDown', 'MouseUp', 'MouseOut', 'MouseOver', 'Remove', 'InfowindowClose', 'InfowindowOpen', 'DragStart', 'Dragging', 'DragEnd', 'RightClick']);
useEnableProperties(marker, props, ['Dragging', 'MassClear', 'Clicking']);
useProperties(marker, props, ['Icon', 'Position', 'Animation', 'Offset', 'Label', 'Title', 'Top', 'ZIndex', 'Rotation', 'Shadow']);
return {
marker,
setMarker,
type,
setType
};
}