我的标记不会在 Angular 中显示在 Google 地图上

Question

我正在尝试使用 Google 地图组件，它现在是 material 的一部分。我能够让地图显示并在点击时触发事件等。但由于某种原因，我没有运气在我的地图上显示标记。

我的 HTML 代码如下所示，当我在页面的按钮上打印它时，我可以看到标记中有一个值。所以我不确定我在这里遗漏了什么或出了什么问题。

<google-map
  height="500px"
  width="100%"
  [zoom]="zoom"
  [center]="center"
  [options]="options"
  (mapClick)="click($event)"
>
  <map-marker
    *ngFor="let marker of markers"
    [position]="marker.position"
    [label]="marker.label"
    [title]="marker.title"
    [options]="marker.options"
  >
  </map-marker>
</google-map>

{{markers | json}}

我的 TS 代码是这样的

import { Component, OnInit, ViewChild } from '@angular/core';
import { GoogleMap } from '@angular/google-maps';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(){
  }
  @ViewChild(GoogleMap, { static: false }) map: GoogleMap;

  title = 'ag-google-map';
  markers = [];
  zoom = 12;
  center: google.maps.LatLngLiteral;
  options: google.maps.MapOptions = {
    mapTypeId: 'hybrid',
    zoomControl: true,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    // maxZoom: 15,
    minZoom: 8,

  };

  addMarker() {
    this.markers.push({
      position: {
        lat: 35.5362475,
        lng: -117.9267386,
      },
      label: {
        color: 'red',
        text: 'Marker label ' + (this.markers.length + 1),
      },
      title: 'Marker title ' + (this.markers.length + 1),
      options: { animation: google.maps.Animation.BOUNCE },
    });
  }


  click(event: google.maps.MouseEvent) {
  console.log(event);
  this.logCenter();
}

  ngOnInit() {
  navigator.geolocation.getCurrentPosition((position) => {
    this.center = {
      lat: position.coords.latitude,
      lng: position.coords.longitude,
    };
  });
  this.addMarker();

}

  logCenter() {
  console.log(JSON.stringify(this.map.getCenter()));
}

Answer 1

我认为您的地理位置（地图中心）离标记点很远。所以你不能在地图的查看区域看到它。所以只有你看不到标记。

测试我将地图中心位置更改为标记位置然后我可以在地图中看到标记。

 ngOnInit() {
  navigator.geolocation.getCurrentPosition((position) => {
    this.center = {
      lat: 35.5362475,
      lng: -117.9267386,
    };
  });
  console.log(this.center);
  setTimeout(() => {
    this.addMarker();
  }, 1000)


}

我的标记不会在 Angular 中显示在 Google 地图上

My Markers won't show on Google Map in Angular

google-maps

angular

angular10