我正在使用agm和agm snazzy-info窗口。由于我使用的标记很小,因此信息窗口离标记太远。 查看snazzy-info-window文档- https://github.com/atmist/snazzy-info-window#offset似乎让您设置了与标记的偏移量。似乎agm snazzy-info-window隐藏了此选项,请参见https://angular-maps.com/api-docs/agm-snazzy-info-window/。
是否可以使用agm snazzy-info窗口来控制偏移量?
答案 0 :(得分:1)
实际上,offset
property中的angular-google-maps repository不会通过AgmSnazzyInfoWindow
组件公开。规避此限制的一种选择是引入自定义组件,该组件扩展 AgmSnazzyInfoWindow
组件并支持指定offset
属性,例如:
import {
Component,
AfterViewInit,
Input
} from "@angular/core";
import { AgmSnazzyInfoWindow } from "@agm/snazzy-info-window";
@Component({
// tslint:disable-next-line:component-selector
selector: 'my-info-window',
template:
"<div #outerWrapper><div #viewContainer></div></div><ng-content></ng-content>"
})
export class MyInfoWindowComponent extends AgmSnazzyInfoWindow
implements AfterViewInit {
/**
* A custom padding size around the content of the info window.
*/
@Input() offset: {top: string, left: string};
ngAfterViewInit() {
super.ngAfterViewInit();
this._snazzyInfoWindowInitialized.then(() => {
this._nativeSnazzyInfoWindow._opts.offset = this.offset;
});
}
}
现在可以这样指定偏移量:
<agm-map [latitude]="center.lat" [longitude]="center.lng">
<agm-marker [latitude]="center.lat" [longitude]="center.lng">
<my-info-window
[offset]="{
top: '-60px',
left: '0px'
}"
>
<ng-template>
Phoenix
</ng-template>
</my-info-window>
</agm-marker>
</agm-map>