Angular2：如何在ngOnInit初始化地图后添加标记？

嘿，我来帮你搞定这个Google Maps标记的问题！咱们一步步来完善你的代码，在地图初始化后顺利添加标记：

第一步：完善组件类结构 #

首先，咱们把地图实例作为组件的属性来管理，避免全局变量的问题，同时补全你的MapComponent类：

import { Component, Input, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormControl } from '@angular/forms';
import Appcomponent from "../app.component";
import { Accident } from '../app.component';

// 声明Google全局对象
declare var google: any;

@Component({
  selector: 'app-map',
  templateUrl: 'map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  // 定义地图实例属性
  private map!: google.maps.Map;
  // 假设你有事故数据要展示标记
  @Input() accidents?: Accident[];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    // 初始化地图
    this.initMap();
    // 地图初始化后立即添加标记
    this.addMarkersToMap();
  }

  // 封装地图初始化方法
  private initMap(): void {
    // 获取地图容器DOM元素（需要在模板中提前定义）
    const mapContainer = document.getElementById('map');
    if (!mapContainer) return;

    // 创建地图实例
    this.map = new google.maps.Map(mapContainer, {
      center: { lat: 40.7128, lng: -74.0060 }, // 示例中心点：纽约
      zoom: 12, // 初始缩放级别
    });
  }

  // 封装添加标记的方法
  private addMarkersToMap(): void {
    // 地图未初始化则直接返回
    if (!this.map) return;

    // 示例1：添加单个固定标记
    const singleMarker = new google.maps.Marker({
      position: { lat: 40.7128, lng: -74.0060 },
      map: this.map,
      title: '纽约市中心', // 鼠标悬停时显示的标题
    });

    // 示例2：根据Accident数据批量添加标记
    if (this.accidents) {
      this.accidents.forEach(accident => {
        new google.maps.Marker({
          position: { lat: accident.latitude, lng: accident.longitude }, // 假设Accident包含经纬度字段
          map: this.map,
          title: `事故ID: ${accident.id}`,
          // 可选：自定义标记图标
          // icon: './assets/accident-marker.png'
        });
      });
    }
  }
}

第二步：准备地图容器模板 #

在map.component.html中添加用于渲染地图的DOM元素，一定要设置宽高：

<div id="map" style="width: 100%; height: 600px;"></div>

关键注意点 #

• 标记必须绑定到已初始化的地图实例上，也就是通过Marker配置项里的map: this.map关联。
• 如果你的Accident数据是异步获取的（比如从HTTP请求返回），记得把addMarkersToMap()放到数据请求完成的回调里，确保数据存在时再添加标记。
• 别忘了在项目的index.html中引入Google Maps的官方脚本（替换成你的API密钥）：

  <script src="https://maps.googleapis.com/maps/api/js?key=你的GoogleMapsAPI密钥"></script>
  

内容的提问来源于stack exchange，提问作者mibrl12