如何在Angular6项目的agm-map指定位置显示自定义DOM元素

默认的agm-marker组件确实只能展示有限的图标和标签内容，要实现你想要的带定位图标和圆形头像的自定义标记，最直接的方案是使用AGM提供的agm-overlay组件——它允许你在地图的指定坐标上渲染任意DOM内容。下面是具体的实现步骤：

1. 基础实现（单个自定义标记） #

首先在你的组件模板中，用agm-overlay包裹你的自定义DOM结构，绑定对应的经纬度：

<agm-map [latitude]="mapCenterLat" [longitude]="mapCenterLng" [zoom]="12">
  <!-- 自定义用户位置标记 -->
  <agm-overlay [latitude]="userLocation.lat" [longitude]="userLocation.lng">
    <a class="user-location">
      <i class="pin-icon"></i>
      <figure>
        <img src="assets/layouts/layout/img/new-icon.png" alt="User Location" />
      </figure>
    </a>
  </agm-overlay>
</agm-map>

然后在组件的CSS文件中添加样式（注意修正了你拼写错误的border-radious为正确的border-radius）：

/* 自定义标记容器 */
.user-location {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  /* 调整锚点，让标记底部精准对准地图坐标点 */
  transform: translate(-50%, -100%);
}

/* 定位图标样式 */
.user-location i.pin-icon {
  opacity: 0.7;
  width: 32px;
  height: 32px;
  background-color: #2196F3;
  border-radius: 50%;
  margin-bottom: -16px; /* 让图标和头像重叠，模拟标记层级效果 */
  z-index: 1;
}

/* 圆形头像样式 */
.user-location img {
  border-radius: 100%;
  width: 40px;
  height: 40px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

最后在组件类中定义必要的坐标变量：

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-map-marker',
  templateUrl: './custom-map-marker.component.html',
  styleUrls: ['./custom-map-marker.component.css']
})
export class CustomMapMarkerComponent {
  // 地图中心坐标
  mapCenterLat = 51.678418;
  mapCenterLng = 7.809007;

  // 用户位置坐标
  userLocation = {
    lat: 51.678418,
    lng: 7.809007
  };
}

2. 批量渲染多个自定义标记 #

如果需要在地图上展示多个用户的自定义标记，可以结合*ngFor循环agm-overlay：

<agm-map [latitude]="mapCenterLat" [longitude]="mapCenterLng" [zoom]="12">
  <agm-overlay 
    *ngFor="let user of userList"
    [latitude]="user.lat" 
    [longitude]="user.lng">
    <a class="user-location">
      <i class="pin-icon"></i>
      <figure>
        <img [src]="user.iconUrl" alt="{{user.name}}'s Location" />
      </figure>
    </a>
  </agm-overlay>
</agm-map>

组件类中添加用户列表数据：

userList = [
  {
    name: 'User 1',
    lat: 51.678418,
    lng: 7.809007,
    iconUrl: 'assets/layouts/layout/img/new-icon.png'
  },
  {
    name: 'User 2',
    lat: 51.680000,
    lng: 7.812000,
    iconUrl: 'assets/layouts/layout/img/another-icon.png'
  }
];

注意事项 #

• 确保图片路径正确：Angular项目中推荐使用assets/开头的相对路径，避免使用../../这类容易出错的层级路径。
• 覆盖层的锚点调整：通过transform: translate(-50%, -100%)可以让标记的中心底部精准对准地图上的坐标点，你可以根据自己的DOM结构调整这个值。
• 交互事件：如果需要给自定义标记添加点击事件，直接在<a>标签上绑定(click)事件即可，和普通Angular组件的事件绑定一致。

内容的提问来源于stack exchange，提问作者M. Urazov