6

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

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

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

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

在此处输入图像描述

请注意，仅运行此代码就可以正常工作：

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

    console.log(map.getZoom());

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

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

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

4

2 回答 2

1

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

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

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

于 2017-02-24T19:47:12.783 回答
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
        });


      });

  }

}
于 2017-02-21T16:27:32.607 回答