使用 agm 库在 Angular 2 中创建多边形

Question

我正在尝试使用 angular 2 AGM 库创建一个多边形。下面附上模板：

<div id="google_map" [@cardtable2]>
            <sebm-google-map #maps [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">

                <sebm-google-map-marker 
                    *ngFor="let m of markers; let i = index"
                    (markerClick)="clickedMarker(m.label, i)"
                    [latitude]="m.lat"
                    [longitude]="m.lng"
                    [label]="m.label"
                    [markerDraggable]="true"
                    (dragEnd)="markerDragEnd(m, $event)">

                    <sebm-google-map-info-window>
                    <strong>{{m.label}}</strong>
                    </sebm-google-map-info-window>          
                </sebm-google-map-marker>
            </sebm-google-map>
        </div>

在控制器中我附加多边形如下：

var city_bounds = [ 
        {
            "longitude" : 77.088103,
            "latitude" : 11.066228
        }, 
        {
            "longitude" : 77.027745,
            "latitude" : 11.113179
        }, 
        {
            "longitude" : 76.937558,
            "latitude" : 11.100018
        }, 
        {
            "longitude" : 76.867772,
            "latitude" : 11.082932
        }, 
        {
            "longitude" : 76.867772,
            "latitude" : 11.038643
        }, 
        {
            "longitude" : 76.899553,
            "latitude" : 10.968071
        }, 
        {
            "longitude" : 76.925336,
            "latitude" : 10.924184
        }, 
        {
            "longitude" : 76.984468,
            "latitude" : 10.92891
        }, 
        {
            "longitude" : 77.032123,
            "latitude" : 10.971053
        }, 
        {
            "longitude" : 77.066364,
            "latitude" : 11.000079
        }, 
        {
            "longitude" : 77.065678,
            "latitude" : 11.030235
        }
    ]


this.mapsAPILoader.load().then(() => {
  this.path = city_bounds.map(point => {
    return new google.maps.LatLng(point.latitude, point.longitude);
  });

  let city_bounds_polygon = new google.maps.Polygon({
    // map: this.mapsElementRef._elem.nativeElement,
    paths: this.path,
    editable: false,
    draggable: false
  })

  city_bounds_polygon.setMap(this.mapsElementRef);
}); 

上面的代码只是大型组件文件的一个小sn-p，其中this.mapsElementRef 是我使用@ViewChild("maps") 装饰器获得的sebm-google-maps 的引用。当我启动节点服务器时，我收到如下错误

app/map.component.ts(233,34): error TS2345: Argument of type 'ElementRef' is not assignable to parameter of type 'Map'.
  Property 'fitBounds' is missing in type 'ElementRef'.

我知道地图参考有问题，在普通的 javascript 中，地图的参考是可用的，因为我们使用 new google.maps.Maps 创建地图，如 here 所示。但是这里的地图是使用角度指令sebm-google-map 创建的。所以，我使用ViewChild 得到了它的引用，并将它与setMap 一起使用，我得到了上面的错误。

我想我必须将 Agm 库中的 AgmPolygon 用作 here，但我不知道如何使用它，因为在文档中我找不到任何示例。谁能提供关于如何使用 Agm 库创建多边形的正确指针？

agm的版本是0.16.0，其实是旧包名angular2-google-maps/core的库

Answer 1

I 溶剂 whit agm +2：

 mapClicked(data){

    this.path.push({ lat: data.coords.lat, lng: data.coords.lng });

    let newArray = Array<any>();
    this.path.forEach((item) => {
      newArray.push(item);
    });

    this.path = newArray;

   } 

//结束地图点击