Angular中如何在谷歌地图上显示真实地址替代原有标记点

直接把原函数里动态传入的车辆坐标替换为办公室固定坐标，配合信息窗口直接展示完整地址文本即可，不需要改动原有地图实例的核心逻辑。

• 优先方案：办公室是固定点位，提前查询好办公室对应的经纬度硬编码在代码里，性能最好，不依赖地理编码接口，不会有配额问题。
• 备选方案：如果只有地址文本没有经纬度，可以调用谷歌地图Geocoder服务把文本地址转换为经纬度后再渲染标记。
• 展示优化：创建标记后默认打开信息窗口，直接把完整地址展示在地图上，不需要用户点击标记才看到地址，还可以替换标记图标为办公室专属样式。

代码实现 #

首先在类中定义办公室固定配置常量，替换成你自己的真实信息：

// 替换为真实办公室信息
private readonly OFFICE_CONFIG = {
  lat: 31.2304, // 办公室纬度
  lng: 121.4737, // 办公室经度
  fullAddress: "上海市浦东新区陆家嘴环路1000号恒生银行大厦20层", // 完整地址文本
  icon: "assets/imgs/office_icon.png" // 可选：自定义办公室标记图标
};
private officeInfoWindow: google.maps.InfoWindow;

修改原渲染函数，替换动态坐标为办公室固定坐标，同时增加地址展示逻辑：

showOfficeOnMap() {
  const officePosition = new google.maps.LatLng(
    this.OFFICE_CONFIG.lat,
    this.OFFICE_CONFIG.lng
  );

  if (this.markerRide) {
    // 已存在标记直接更新位置和样式
    this.markerRide.setPosition(officePosition);
    this.markerRide.setTitle("办公室地址");
    if (this.OFFICE_CONFIG.icon) {
      this.markerRide.setIcon(this.OFFICE_CONFIG.icon);
    }
  } else {
    // 首次创建办公室标记
    this.markerRide = new google.maps.Marker({
      position: officePosition,
      map: this.maps.map,
      title: "办公室地址",
      icon: this.OFFICE_CONFIG.icon || undefined
    });
  }

  // 初始化信息窗口，默认打开直接展示地址
  if (!this.officeInfoWindow) {
    this.officeInfoWindow = new google.maps.InfoWindow({
      content: `<div style="padding:4px 8px;"><p style="font-weight:bold;margin:0 0 4px;">公司办公地址</p><p style="margin:0;">${this.OFFICE_CONFIG.fullAddress}</p></div>`
    });
  }
  this.officeInfoWindow.open(this.maps.map, this.markerRide);

  // 可选：地图自动居中到办公室位置，设置合适缩放级别
  this.maps.map.setCenter(officePosition);
  this.maps.map.setZoom(17);
}

如果你暂时拿不到办公室经纬度，只有文本地址，可以用地理编码接口转换坐标后再渲染：

renderOfficeByTextAddress(address: string) {
  const geocoder = new google.maps.Geocoder();
  geocoder.geocode({ address: address }, (results, status) => {
    if (status === google.maps.GeocoderStatus.OK && results?.length) {
      const officePosition = results[0].geometry.location;
      // 后续创建标记、展示信息窗口、居中地图的逻辑和上面的代码完全一致
      if (this.markerRide) {
        this.markerRide.setPosition(officePosition);
      } else {
        this.markerRide = new google.maps.Marker({
          position: officePosition,
          map: this.maps.map,
          title: "办公室地址"
        });
      }
      this.maps.map.setCenter(officePosition);
      this.maps.map.setZoom(17);
    }
  });
}

注意：Geocoder接口有调用配额限制，固定地址建议提前查询好经纬度写死，不要每次加载地图都调用接口，避免触发配额限制导致服务不可用，也能提升地图加载速度。

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