此文件的声明发出需要使用专用名称"HTMLMarker"。显式类型注释可能会取消阻止声明发出

Question

我正在尝试使用代码，这不是我的，所以我只能根据自己的目的进行调整，而不需要更改逻辑。我的项目的开发版本运行良好，但当我试图构建它时，我遇到了一个令人讨厌的错误："此文件的声明发出要求使用私有名称"HTMLMarker"。显式类型注释可以取消阻止声明发射">

我曾尝试从类似的问题中调整解决方案，如Stackoverflow中所述，但仍然无法解决这个问题。这是我的代码，非常感谢的帮助

/* @ts-ignore */
const createHTMLMarker = (google) => {
class HTMLMarker extends google.maps.OverlayView {
constructor({
position,
map,
className,
anchor = {
x: 0,
y: 0,
},
}) {
super();
this.anchor = anchor;
this.subscriptions = [];
this.latLng = new google.maps.LatLng(position);
this.element = document.createElement('div');
this.element.className = className;
this.element.style.position = 'absolute';
// Force the "white-space" of the element will avoid the
// content to collapse when we move the map from center
this.element.style.whiteSpace = 'nowrap';
this.setMap(map);
}
onAdd() {
if (this.getPanes()) {
this.getPanes().overlayMouseTarget.appendChild(this.element);
}
}
draw() {
if (this.getProjection()) {
const position = this.getProjection().fromLatLngToDivPixel(this.latLng);
const offsetX = this.anchor.x + this.element.offsetWidth / 2;
const offsetY = this.anchor.y + this.element.offsetHeight;
this.element.style.left = `${Math.round(position.x - offsetX)}px`;
this.element.style.top = `${Math.round(position.y - offsetY)}px`;
// Markers to the south are in front of markers to the north
// This is the default behaviour of Google Maps
this.element.style.zIndex = parseInt(this.element.style.top, 10);
}
}
onRemove() {
if (this.element && this.element.parentNode) {
this.element.parentNode.removeChild(this.element);
this.subscriptions.forEach((subscription) => subscription.remove());
delete this.element;
this.subscriptions = [];
}
}
addListener(eventName, listener) {
const subscription = {
remove: () => {
this.element.removeEventListener(eventName, listener);
this.subscriptions = this.subscriptions.filter(
(_) => _ !== subscription
);
},
};
this.element.addEventListener(eventName, listener);
this.subscriptions = this.subscriptions.concat(subscription);
return subscription;
}
getPosition() {
return this.latLng;
}
}
return HTMLMarker;
};
export default createHTMLMarker;

Answer 1

如果你能为你的项目创建一个最小的可复制沙盒，那会很有帮助。否则，我们甚至不知道你在谷歌地图上使用的库。

下面的代码有帮助吗？你能测试一下吗？此外，您没有以正确的方式使用Typescript。

如果你想避免对特定文件进行TS检查，你应该在文件的顶部使用//@TS nocheck

interface HTMLMarkerProps {
map: string;
position: {
lng: number;
lat: number;
};
anchor: {
y: number;
x: number;
};
className: string;
}
const getCustomHTMLMarker = (google : any) => class HTMLMarker extends google.maps.OverlayView {
element? : HTMLDivElement;
latLng : google.maps.LatLng;
subscriptions: Array<{
remove : () => void;
}> = [];
anchor : {
x:number;
y: number;
} = {
y: 0,
x: 0,
};
constructor({
position,
map,
className,
anchor = {
x: 0,
y: 0,
},
} : HTMLMarkerProps) {
super();
this.anchor = anchor;
this.subscriptions = [];
this.latLng = new google.maps.LatLng(position);
this.element = document.createElement('div');
this.element.className = className;
this.element.style.position = 'absolute';
// Force the "white-space" of the element will avoid the
// content to collapse when we move the map from center
this.element.style.whiteSpace = 'nowrap';
this.setMap(map);
}
onAdd() {
if (this.getPanes()) {
this.getPanes().overlayMouseTarget.appendChild(this.element);
}
}
draw() {
if (this.getProjection() && this.element) {
const position = this.getProjection().fromLatLngToDivPixel(this.latLng);
const offsetX = this.anchor.x + this.element.offsetWidth / 2;
const offsetY = this.anchor.y + this.element.offsetHeight;
this.element.style.left = `${Math.round(position.x - offsetX)}px`;
this.element.style.top = `${Math.round(position.y - offsetY)}px`;
// Markers to the south are in front of markers to the north
// This is the default behaviour of Google Maps
this.element.style.zIndex = `${parseInt(this.element.style.top, 10)}`;
}
}
onRemove() {
if (this.element && this.element.parentNode) {
this.element.parentNode.removeChild(this.element);
this.subscriptions.forEach((subscription) => subscription.remove());
if (this.element) {
delete this.element;
}
this.subscriptions = [];
}
}
addListener(eventName : keyof HTMLElementEventMap, listener : (e : EventListener<HTMLDivElement>) => void) {
if (!this.element) {
return;
}
const subscription = {
remove: () => {
if (!this.element) {
return;
}
this.element.removeEventListener(eventName, listener);
this.subscriptions = this.subscriptions.filter(
(_) => _ !== subscription
);
},
};
this.element.addEventListener(eventName, listener);
this.subscriptions = this.subscriptions.concat(subscription);
return subscription;
}
getPosition() {
return this.latLng;
}
}
export default getCustomHTMLMarker;

此外，为什么要从OverlayView继承HTMLMarker？这没有道理。

不过，这听起来是一个有趣的问题，所以你可以用更多的细节来更新它，这样我就可以帮助你实现你想在应用程序中使用的逻辑。