@capacitor/google-maps中点击Marker如何获取屏幕坐标定位Popover？

核心思路：地理坐标转屏幕坐标 #

Capacitor Google Maps提供了screenCoordinate()方法，能将标记的经纬度转换为屏幕像素坐标，利用这个坐标就能精准定位Popover。

具体实现代码 #

修改标记点击回调逻辑：

await this.newMap.setOnMarkerClickListener(async (marker) => {
  // 提取标记的经纬度（若marker.position不存在，可改用创建标记时存入的自定义data）
  const markerLatLng = marker.position || marker.data?.position;
  if (!markerLatLng) return;

  // 将地理坐标转换为屏幕坐标
  const screenPosition = await this.newMap.screenCoordinate({
    coordinate: markerLatLng
  });

  // 创建并定位Popover
  const popover = await this.popoverController.create({
    component: MapMarkerPopupComponent,
    componentProps: { markerTitle: marker.title },
    cssClass: 'marker-popover',
    // 传入模拟的点击事件对象，用于定位
    event: {
      clientX: screenPosition.x,
      clientY: screenPosition.y - 60 // 向上偏移避免遮挡标记，数值可按需调整
    }
  });

  await popover.present();
  await popover.onDidDismiss();
});

添加自定义CSS调整弹窗样式（全局样式文件或组件样式中）：

.marker-popover {
  --width: 220px;
  --background: #fff;
  --border-radius: 8px;
  --transform-origin: top center; /* 让弹窗以顶部中心为基准定位 */
}

注意事项 #

• 若marker.position不存在，需在创建标记时手动存入坐标到自定义数据：

  const newMarker = await this.newMap.addMarker({
    position: { lat: 39.9042, lng: 116.4074 },
    title: '北京',
    data: { position: { lat: 39.9042, lng: 116.4074 } } // 存入坐标
  });
  

备选方案：切换到@angular/google-maps #

如果不想折腾自定义弹窗，直接使用Angular官方的Google Maps库，原生支持InfoWindow，无需额外定位：

<!-- 模板文件 -->
<google-map [center]="mapCenter" [zoom]="12">
  <map-marker 
    *ngFor="let marker of markers"
    [position]="marker.position"
    (mapClick)="openInfoWindow(marker, infoWindow)"
  ></map-marker>
  <map-info-window #infoWindow>
    <h6>{{ currentMarker?.title }}</h6>
  </map-info-window>
</google-map>

// 组件逻辑
currentMarker: any;

openInfoWindow(marker: any, infoWindow: google.maps.InfoWindow) {
  this.currentMarker = marker;
  infoWindow.open(infoWindow.getMap(), marker);
}

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