Để tích hợp và sử dụng thành phần bản đồ Gaode vào ứng dụng của mình, chúng ta sẽ xây dựng một giao diện cho phép người dùng thực hiện các thao tác như đặt dấu vị trí, chỉnh sửa thông tin địa chỉ và lưu trữ tọa độ. Dưới đây là cách triển khai chi tiết.

1. Yêu cầu từ người dùng

Người dùng quản lý thông tin doanh nghiệp trong khu vực, họ muốn:

• Hiển thị vị trí các doanh nghiệp trên bản đồ.
• Đặt dấu vị trí cho từng doanh nghiệp.
• Có thể điều chỉnh vị trí bằng cách kéo thả.
• Hiển thị tên doanh nghiệp khi di chuột qua dấu vị trí.
• Xem thông tin chi tiết khi nhấp vào dấu vị trí.
• Tự động ẩn thông tin sau 3 giây nếu không tương tác.
• Tìm kiếm và đánh dấu nhanh dựa trên tên doanh nghiệp.
• Cập nhật lại vị trí đã tồn tại của một doanh nghiệp cụ thể.

Ngoài ra, yêu cầu từ nhà phát triển bao gồm:

• Giao diện đơn giản và dễ sử dụng.
• Tập trung hiển thị đúng khu vực quản lý.
• Kết hợp liền mạch giữa chức năng và bản đồ.

2. Thiết kế giao diện

Giao diện chính bao gồm:

• Một khung bản đồ lớn chiếm phần lớn màn hình.
• Phần dưới cùng hiển thị thông tin chi tiết về địa chỉ, kinh độ, vĩ độ.
• Các nút "Xác nhận" và "Hủy bỏ".

Sử dụng ba trường nhập liệu để tương ứng với địa chỉ chi tiết, kinh độ và vĩ độ. Người dùng có thể nhập tên doanh nghiệp và tìm kiếm để tự động đánh dấu vị trí trên bản đồ.

<div>
  <!-- Layout -->
  <div id="map-container"></div>
  <div id="info-panel">
    <input type="text" id="address" placeholder="Địa chỉ chi tiết...">
    <input type="text" id="longitude" placeholder="Kinh độ...">
    <input type="text" id="latitude" placeholder="Vĩ độ...">
    <button id="confirm">Xác nhận</button>
    <button id="cancel">Hủy bỏ</button>
  </div>
</div>

3. Thêm dấu vị trí (Add Marker)

Chúng ta tạo phương thức addMarker để thêm dấu vị trí trên bản đồ:

function TMapForm.AddMarker(ALng, ALat: Double): TMapMarker;
var
  Marker: TMapMarker;
begin
  if MapComponent.Markers.Count = 0 then
  begin
    Marker := MapComponent.Markers.Add;
    Marker.Position.Lng := ALng;
    Marker.Position.Lat := ALat;

    Marker.Icon.Image := 'https://example.com/marker-icon.png';
    Marker.Icon.Size.Width := 25;
    Marker.Icon.Size.Height := 34;

    Marker.Offset.X := -13;
    Marker.Offset.Y := -30;

    Marker.CustomParams.Values['CorpName'] := Self.CorpName;
    Marker.Draggable := True;
    Marker.AddToMap;
  end
  else
  begin
    Marker := MapComponent.Markers.Items[0];
    Marker.SetPosition(ALng, ALat);
  end;

  Result := Marker;
end;

Phương thức này đảm bảo chỉ có một dấu vị trí duy nhất được hiển thị và cập nhật khi cần thiết.

4. Xử lý sự kiện nhấp chuột trên bản đồ

Khi người dùng nhấp vào bản đồ, chúng ta sẽ thực hiện các hành động sau:

procedure TMapForm.MapClick(Sender: TObject; Position: TLngLat);
var
  Address: String;
begin
  LongitudeInput.Text := Position.Lng.ToString;
  LatitudeInput.Text := Position.Lat.ToString;

  MapComponent.Geocoder.GetAddress(Position,
    procedure(AResult: TArray<String>)
    begin
      AddressInput.Text := AResult[0];
    end);

  AddMarker(Position.Lng, Position.Lat);
end;

Trong đó, GetAddress là phương thức lấy địa chỉ chi tiết dựa trên tọa độ.

5. Xử lý sự kiện kéo thả dấu vị trí

Khi người dùng kéo thả dấu vị trí, chúng ta cập nhật thông tin tương ứng:

procedure TMapForm.MarkerDragEnd(Sender: TObject; Marker: TMapMarker; Position: TLngLat);
begin
  LongitudeInput.Text := Position.Lng.ToString;
  LatitudeInput.Text := Position.Lat.ToString;

  MapComponent.Geocoder.GetAddress(Position,
    procedure(AResult: TArray<String>)
    begin
      AddressInput.Text := AResult[0];
    end);

  var Label := MapComponent.Labels.Items[0];
  Label.Show;
  Label.SetPosition(Position);
  Label.SetText(Marker.CustomParams.Values['CorpName']);
end;

6. Gọi giao diện từ form chính

Cuối cùng, chúng ta gọi giao diện từ form chính và xử lý kết quả trả về:

procedure TMainForm.OpenMap(Sender: TObject);
var
  Lng, Lat: String;
  CorpAddress, CorpName: String;
begin
  Lng := DataSet.FieldByName('FJD').AsString;
  Lat := DataSet.FieldByName('FWD').AsString;
  CorpAddress := DataSet.FieldByName('FADDRESSNAME').AsString;
  CorpName := DataSet.FieldByName('FName').AsString;

  MapForm.Lng := Lng;
  MapForm.Lat := Lat;
  MapForm.CorpAddress := CorpAddress;
  MapForm.CorpName := CorpName;

  MapForm.ShowModal(
    procedure(Sender: TComponent; Result: Integer)
    begin
      if Result = mrOK then
      begin
        DataSet.Edit;
        DataSet.FieldByName('FJD').AsString := MapForm.Lng;
        DataSet.FieldByName('FWD').AsString := MapForm.Lat;
        DataSet.FieldByName('FADDRESSNAME').AsString := MapForm.CorpAddress;
        DataSet.Post;
      end;
    end);
end;

Như vậy, chúng ta đã hoàn thành việc tích hợp và sử dụng thành phần bản đồ Gaode để đáp ứng các yêu cầu của người dùng.