如何在Capacitor Google Maps插件中自定义markerId？

一、无需修改插件的临时方案 #

可以通过建立映射表的方式，把插件自动生成的m{index}格式ID和你的数据库自定义ID绑定，实现业务需求：

// 示例：从数据库获取的标记数据
const dbMarkerList = [
  { dbId: 'order_1001', lat: 39.9042, lng: 116.4074 },
  { dbId: 'order_1002', lat: 31.2304, lng: 121.4737 }
];

// 用于存储插件ID和自定义ID的映射
const markerIdMapping = new Map<string, string>();

// 添加标记并记录映射关系
const addedMarkersRes = await GoogleMaps.addMarkers({
  markers: dbMarkerList.map(item => ({
    position: { lat: item.lat, lng: item.lng }
  }))
});

// 逐个绑定ID映射
addedMarkersRes.markers.forEach((marker, idx) => {
  markerIdMapping.set(marker.id, dbMarkerList[idx].dbId);
});

// 监听标记点击，通过映射获取自定义ID
GoogleMaps.addListener('markerClick', (event) => {
  const targetDbId = markerIdMapping.get(event.markerId);
  // 这里就可以用自定义ID处理业务逻辑了
  console.log('点击的标记对应的数据库ID:', targetDbId);
});

这个方法不用改动插件代码，适合快速上线场景，唯一需要注意的是如果标记有增删操作，要同步更新映射表。

二、修改插件实现原生支持自定义ID #

完全可以基于谷歌原生地图API修改Capacitor插件，实现直接传入自定义ID的功能，步骤如下：

1. 扩展插件的TypeScript类型定义 #

找到插件的类型定义文件（通常是src/definitions.ts），给Marker接口添加customId字段：

export interface Marker {
  position: LatLng;
  title?: string;
  snippet?: string;
  customId?: string; // 新增自定义ID字段
  // 保留原有其他字段
}

2. 修改iOS端原生代码 #

在iOS的GoogleMapsPlugin.swift文件中，处理addMarkers方法时，将customId存入标记的userData属性：

func addMarkers(_ call: CAPPluginCall) {
  guard let markersArray = call.getArray("markers", JSObject.self) else {
    call.reject("Missing markers array")
    return
  }
  
  var resultMarkers = [JSObject]()
  
  for (index, markerJson) in markersArray.enumerated() {
    let marker = GMSMarker()
    // 原有设置position、title等属性的逻辑不变
    
    // 存入自定义ID
    if let customId = markerJson["customId"] as? String {
      marker.userData = customId
    }
    
    marker.map = mapView
    marker.accessibilityLabel = "m\(index)"
    
    let resultMarker = JSObject()
    resultMarker["id"] = marker.accessibilityLabel
    // 可选：把customId也返回给前端
    if let customId = marker.userData as? String {
      resultMarker["customId"] = customId
    }
    resultMarkers.append(resultMarker)
  }
  
  let result = JSObject()
  result["markers"] = resultMarkers
  call.resolve(result)
}

然后修改标记点击的回调逻辑，把自定义ID返回给前端：

func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
  let data = JSObject()
  data["markerId"] = marker.accessibilityLabel
  
  // 取出自定义ID并返回
  if let customId = marker.userData as? String {
    data["customId"] = customId
  }
  
  notifyListeners("markerClick", data: data)
  return false
}

3. 修改Android端原生代码 #

在Android的GoogleMapsPlugin.java文件中，处理addMarkers时，将customId设置到标记的tag属性：

@PluginMethod
public void addMarkers(PluginCall call) {
  JsonArray markers = call.getArray("markers");
  if (markers == null) {
    call.reject("Missing markers array");
    return;
  }

  JsonArray resultMarkers = new JsonArray();

  for (int i = 0; i < markers.size(); i++) {
    JsonObject markerJson = markers.get(i).getAsJsonObject();
    MarkerOptions options = new MarkerOptions();
    // 原有设置position、title等属性的逻辑不变
    
    Marker marker = map.addMarker(options);
    // 设置自定义ID到tag
    if (markerJson.has("customId")) {
      marker.setTag(markerJson.get("customId").getAsString());
    }
    
    JsonObject resultMarker = new JsonObject();
    resultMarker.addProperty("id", marker.getId());
    // 可选：返回customId给前端
    if (marker.getTag() != null) {
      resultMarker.addProperty("customId", marker.getTag().toString());
    }
    resultMarkers.add(resultMarker);
  }

  JsonObject result = new JsonObject();
  result.add("markers", resultMarkers);
  call.resolve(result);
}

修改标记点击监听，把自定义ID返回：

map.setOnMarkerClickListener(marker -> {
  JSObject data = new JSObject();
  data.put("markerId", marker.getId());
  
  // 取出tag中的自定义ID
  if (marker.getTag() != null) {
    data.put("customId", marker.getTag().toString());
  }
  
  notifyListeners("markerClick", data);
  return false;
});

4. 前端调用示例 #

修改后就可以直接在添加标记时传入自定义ID：

await GoogleMaps.addMarkers({
  markers: [
    {
      position: { lat: 39.9042, lng: 116.4074 },
      customId: 'order_1001'
    },
    {
      position: { lat: 31.2304, lng: 121.4737 },
      customId: 'order_1002'
    }
  ]
});

// 点击时直接获取自定义ID
GoogleMaps.addListener('markerClick', (event) => {
  console.log('自定义ID:', event.customId);
});

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