Trong phần tiếp theo của chuỗi hướng dẫn tích hợp bản đồ Gaode (Amap) qua thành phần ChinaCock, chúng ta sẽ triển khai tính năng hiển thị nhãn nổi (floating tooltip) khi người dùng di chuyển con trỏ chuột lên các điểm đánh dấu (marker) — nhằm hiện tên doanh nghiệp một cách trực quan và không làm gián đoạn trải nghiệm bản đồ.

1. Khởi tạo đối tượng nhãn động

Khi khởi tạo bản đồ, cần thêm một đối tượng Text vào danh sách quản lý nhãn (Texts) của thành phần bản đồ. Đối tượng này được cấu hình để xuất hiện ở vị trí tương đối phía trên marker, với giao diện tối ưu hóa về mặt thị giác và khả năng tương tác:

// Tạo nhãn tĩnh cho từng marker
var
  TooltipLabel := CCuniGUIAMap1.Texts.Add;
with TooltipLabel do
begin
  Options.Anchor := 'center';
  Options.Cursor := 'default';
  Options.Offset.Y := -36; // Dịch lên trên 36px so với tọa độ gốc

  // Áp dụng CSS inline để kiểm soát giao diện
  Style := '{'
    + '"padding": "4px 8px",'
    + '"border-radius": "4px",'
    + '"background": "#ffffff",'
    + '"color": "#2c3e50",'
    + '"font-size": "12px",'
    + '"font-weight": "500",'
    + '"box-shadow": "0 2px 8px rgba(0,0,0,0.12)"'
    + '}';
end;

2. Gắn dữ liệu tên doanh nghiệp vào marker

Để nhãn có thể hiển thị đúng thông tin, tên tổ chức được lưu trữ trong thuộc tính CustomParams của đối tượng TMarker ngay lúc tạo — đảm bảo dữ liệu đi kèm marker mà không phụ thuộc vào biến toàn cục hay mảng ngoài:

// Khi thêm marker vào bản đồ
var
  NewMarker := CCuniGUIAMap1.Markers.Add;
NewMarker.Options.Position := TLngLat.Create(Lng, Lat);
NewMarker.CustomParams.Values['CompanyName'] := 'Công ty TNHH Giải Pháp Công Nghệ ABC';

3. Hiển thị nhãn khi di chuột vào marker

Sử dụng sự kiện MarkerMouseOver để kích hoạt nhãn. Trước khi cập nhật nội dung và vị trí, cần gọi phương thức Show() để đảm bảo nhãn được render đúng trạng thái hiển thị:

procedure TGaoDeMapForm.CCuniGUIAMap1MarkerMouseOver(
  const ASender: TObject;
  const AMarker: TCCuniGUIAMap.TMarker;
  const ALngLat: TLngLat;
  const AEventParams: TUniStrings);
begin
  var
    LabelRef := CCuniGUIAMap1.Texts.Items[0];

  LabelRef.Show();
  LabelRef.SetPosition(AMarker.Options.Position);
  LabelRef.SetText(AMarker.CustomParams.Values['CompanyName']);
end;

4. Ẩn nhãn khi di chuột ra ngoài marker

Tương tự, sự kiện MarkerMouseOut được sử dụng để thu hồi nhãn — giúp tránh tình trạng nhãn bị treo trên bản đồ khi người dùng rời khỏi vùng ảnh hưởng:

procedure TGaoDeMapForm.CCuniGUIAMap1MarkerMouseOut(
  const ASender: TObject;
  const AMarker: TCCuniGUIAMap.TMarker;
  const ALngLat: TLngLat;
  const AEventParams: TUniStrings);
begin
  CCuniGUIAMap1.Texts.Items[0].Hide();
end;

Với bốn bước trên, hệ thống đã hỗ trợ đầy đủ cơ chế hiển thị/ẩn nhãn động dựa trên hành vi người dùng, đồng thời duy trì tính độc lập giữa dữ liệu và giao diện.