在Angular 2 Google地图上移动地图控件

Question

我正在寻找一种方法来使用常规谷歌地图中可用的zoomControlOptiions属性,如下所示:

zoomControlOptions: {
  style: google.maps.ZoomControlStyle.SMALL,
  position: google.maps.ControlPosition.LEFT_CENTER
},

Stackoverflow示例显示上面的代码
在官方谷歌地图文档中相同的事情

很遗憾,我在Angular 2 Google Maps API文档中没有看到此选项.有办法吗？尽管使用Angular 2包装器,有没有办法使用完整的功能？

请注意,只运行此代码工作正常:

    map.setOptions({
      zoom: 1,
      center: position,
      zoomControl: true
    });

    console.log(map.getZoom());

我能够获取本机谷歌地图对象并在其上运行方法/设置属性.当我尝试使用时会出现问题zoomControlOptions,这直接来自文档

---

编辑:所以,它实际上工作,现在的问题是绕过Typescript编译器抱怨.

编辑2:我修复了问题,但如果有人想要赏金 - 随意解释为什么zoomControlOptions不能原生可用.

Answer 1

您可以获取对本机地图对象的引用，然后添加 ZoomControlOptions。获取地图参考的完整示例可以在https://github.com/philipbrack/example-angular2-google-maps-getNativeMap找到：

import {Component, OnInit} from '@angular/core';

import {GoogleMapsAPIWrapper} from 'angular2-google-maps/core';

declare var google:any;

@Component({
  selector: 'app-map-content',
  template: ''
})
export class MapContentComponent implements OnInit {

  constructor(public mapApiWrapper:GoogleMapsAPIWrapper) {

  }

  ngOnInit() {

    this.mapApiWrapper.getNativeMap()
      .then((map)=> {

        // I have been manually updating core/services/google-maps-types.d.ts to include things they didn't include.
        console.log(map.getZoom());

        let position = new google.maps.LatLng(45.521, -122.677);

        var cityCircle = new google.maps.Circle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          center: position,
          radius: 10000
        });


      });

  }

}