javascript - 在 Angular 2 Google map 上移动 map 控件

Question

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

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

Stackoverflow example showing code above
Same thing in the official google maps docs

不幸的是，我在 Angular 2 Google map 中看不到这个选项 API Docs .有办法吗？尽管使用了 Angular 2 包装器，有没有办法使用全部功能？

请注意，只要运行这段代码就可以正常工作:

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

    console.log(map.getZoom());

我能够获取 native 谷歌地图对象并在其上运行方法/设置属性。当我尝试使用直接来自 docs 的 zoomControlOptions 时出现问题。

---

编辑:所以，它确实有效，现在的问题是绕过 Typescript 编译器的提示。

编辑 2:我解决了这个问题，但如果有人想要赏金 - 请随时解释为什么 zoomControlOptions 不是本地可用的。

Answer 1

您可以获得对 native map 对象的引用，然后添加 zoomControlOptions。在 https://github.com/philipbrack/example-angular2-google-maps-getNativeMap 中可以找到获取 map 引用的完整示例。 :

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
        });


      });

  }

}