我的标记不会显示在 Angular 的谷歌地图上[关闭]答案

【问题标题】：My Markers won't show on Google Map in Angular [closed]我的标记不会显示在 Angular 的谷歌地图上[关闭]
【发布时间】：2021-03-16 06:06:33
【问题描述】：

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

我的 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()));
}

【问题讨论】：

什么是center: google.maps.LatLngLiteral;？您应该为地图中心提供坐标。您是否确认您的地图以标记为中心？在任何情况下，您都必须提供minimal reproducible example 以及调试详细信息以及您尝试调试的内容。

标签： angular google-maps angular10

【解决方案1】：

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

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

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


}

【讨论】：