Question

我是Angular 5的新手。在我的应用程序中有一张谷歌地图。当用户放大或缩小时，我需要捕捉该动作并执行任务。 Google API中已经有缩放更改事件。如何在Angular 5中使用该功能？

我想用这个

class WindowController: NSWindowController, CALayerDelegate {

static let spinAnimation: CAAnimation = {
    let basicAnimation = CABasicAnimation(keyPath:"transform.rotation")
    basicAnimation.fromValue = 2.0 * .pi
    basicAnimation.toValue = 0.0
    basicAnimation.duration = 1.0
    basicAnimation.repeatCount = Float.infinity

    return basicAnimation
}()

@IBOutlet weak var imageView: NSImageView! {
    didSet{
        let layer = CALayer()
        layer.contentsScale = 2.0
        layer.contentsGravity = "aspectFit"
        layer.contents = #imageLiteral(resourceName: "windmill")
        imageView.layer = layer
        imageView.wantsLayer = true
        imageView.layerContentsRedrawPolicy = .onSetNeedsDisplay
        imageView.layer?.delegate = self
        imageView.needsDisplay = true
    }
}

func display(_ layer: CALayer) {
    let frame = layer.frame
    layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
    layer.frame = frame
}

override func windowDidLoad() {
    super.windowDidLoad()


    let key = "spinAnimation"

    self.imageView.layer?.add(WindowController.spinAnimation, forKey: key)

    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + .seconds(5)) {
        self.imageView.layer?.removeAnimation(forKey: key)
    }
}
}

我也在ngOnInit中尝试过。然后我得到谷歌没有定义。我的appcomponent看起来像这样。

    google.maps.event.addListener(this.map, 'zoom_changed', function() {
  var zoom = this.map.getZoom();
  if (zoom > 3) {

    console.log("Zoom changed to high")
  } else {

    console.log("Zoom changed to low")
  } 
})

Answer 1

我希望你已经在index.html中添加了谷歌地图脚本

您需要声明Google变量，如下所示：

<!-- After all imports -->

declare var google:any;

然后你可以使用：

google.maps.event.addListener(this.map, 'zoom_changed',()=> {
   //Code here   
})

如何在Angular 5中使用事件处理方法？

1 个答案: