在 Angular 2 谷歌地图上移动地图控件答案

【问题标题】：Moving Map Controls on Angular 2 Google Maps在 Angular 2 谷歌地图上移动地图控件
【发布时间】：2017-02-21 16:20:43
【问题描述】：

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

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 Maps API Docs 中没有看到这个选项。有没有办法做到这一点？尽管使用了 Angular 2 包装器，有没有办法使用全部功能？

请注意，只需运行此代码即可：

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

    console.log(map.getZoom());

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

编辑：所以，它确实有效，现在的问题是绕过 Typescript 编译器的抱怨。

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

【问题讨论】：

标签： javascript google-maps angular angular2-google-maps

【解决方案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
        });


      });

  }

}

【讨论】：

谢谢，现在试试。

【解决方案2】：

所以，显然我需要做的就是确保编译器不会通过创建接口来抱怨：

interface NativeGoogMapProps {
    zoomControlOptions?: any;
    streetViewControlOptions?: any;
}

然后在设置地图选项时使用它：

    let zoomControlOptions: any = {
      style: google.maps.ControlPosition.small,
      position: google.maps.ControlPosition.RIGHT_CENTER
    };

    let streetViewControlOptions: any =  {
      position: google.maps.ControlPosition.RIGHT_CENTER
    };

    map.setOptions(<NativeGoogMapProps>{
      zoomControlOptions: zoomControlOptions,
      streetViewControlOptions: streetViewControlOptions
    });

我实际上不知道为什么有些道具在地图对象上而有些却没有，但这可以正常工作。

【讨论】：