为 agm snazzy-info-window 设置 info-window 偏移量

Question

我正在使用 agm 和 agm snazzy-info window。由于我使用的标记很小，信息 window 离标记太远了。查看 snazzy-info-window 文档 - https://github.com/atmist/snazzy-info-window#offset seems like they let you set the offset from the marker. It seems like agm snazzy-info-window hide this option, see https://angular-maps.com/api-docs/agm-snazzy-info-window/.

有没有办法使用 agm snazzy-info 来控制偏移量 window？

Answer 1

的确，offset property according to 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>

Here is a demo

为 agm snazzy-info-window 设置 info-window 偏移量

Setting info-window offset for agm snazzy-info-window

angular-google-maps

snazzymaps