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

以上代码只是一小段大型组件文件，其中this.mapsElementRef是对sebm-google-maps的引用，我使用@ViewChild（“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，但我不知道如何使用它，因为在docs中我找不到任何示例。任何人都可以提供关于如何使用Agm库创建Polygon的正确指针吗？

agm的版本是0.16.0，实际上它是旧包名{j}的库＃{1}}

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;

   }

//结束mapClicked

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

1 个答案: