javascript - 使用 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>

然后在 Controller 中我附加多边形如下:

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

上面的代码只是大型组件文件的一小段，其中 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'.

我知道 map 引用有问题，在纯 javascript 中， map 的引用是可用的，因为我们使用 new google.maps.Maps 创建 map ，如 here 所示.然而，这里的 map 是使用 Angular Directive(指令) sebm-google-map 创建的。所以，我使用 ViewChild 获得了它的引用，并将它与 setMap 一起使用，我得到了上面的错误。

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

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

Answer 1

I solvent 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;

   } 

//结束 map 点击