HarmonyOS鸿蒙NEXT地图大头针选择位置并显示弹窗组件案例

HarmonyOS鸿蒙NEXT地图大头针选择位置并显示弹窗组件案例 HarmonyOS Next应用开发案例（持续更新中……）

本案例完整代码，请访问：https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/mapthumbtack

介绍

本示例提供了大头针选择位置并显示弹窗组件的解决方案。该大头针组件分为三个状态，分别是静止态（地图移动过程中，大头针无动画）、加载态（地图停止移动，等待获取地址信息，大头针展示波纹动画表示数据加载中）、显示态（数据加载完成，弹窗显示地址相关信息）。开发者可根据需要直接引入该组件，根据具体使用场景，传入不同的数据，组件根据传入数据的情况显示不同的状态。由于使用场景中，大头针动画需要随时停止，因此选用[@ohos.animator](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-animator-V5)实现大头针的波纹和跳动动画。

效果预览图

大头针选择位置并显示弹窗组件的效果图

使用说明

  1. 打开案例后，地图上会显示一个加载状态的大头针，显示波纹动画，表示正在获取该位置的地址信息，动画结束后大头针上方会弹出地址信息窗口，显示详细地址和地址实景图。
  2. 大头针加载和静止时都可以拖动地图选择位置，按住拖动时大头针无动画且信息窗口消失，松手后大头针显示波纹动画，动画结束后大头针上方会弹出地址信息窗口，显示详细地址和地址实景图。
  3. 地址信息窗口中实景图片和地址信息可以点击，点击后出现相应提示。

实现思路

场景：大头针选择位置并显示弹窗组件

高性能知识点

不涉及

工程结构 & 模块类型

mapthumbtack                                // har类型
|--src/main/ets/components
|   |--LocationAndPopupComponent.ets       // 视图层-大头针选择位置并显示弹窗组件 
|   |--AddressPopUpComponent.ets           // 视图层-依赖的地址显示组件 
|   |--ThumbTackComponent.ets              // 视图层-依赖的大头针组件 
|--src/main/ets/model
    |--CommonConstants.ets                 // 模型层-通用常量

模块依赖

本实例依赖 common 模块来实现 资源 的调用。

参考资料

  1. Path 參考参考文档
  2. animator 参考文档

更多关于HarmonyOS鸿蒙NEXT地图大头针选择位置并显示弹窗组件案例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

你好，我down下项目，加载CommonAppDevelopment，预览不了为啥

更多关于HarmonyOS鸿蒙NEXT地图大头针选择位置并显示弹窗组件案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


不错。学习了

在HarmonyOS鸿蒙NEXT中，实现地图大头针选择位置并显示弹窗组件的案例，可以通过以下步骤进行：

  1. 地图组件集成：使用MapView组件来展示地图，并通过MapController控制地图的交互。

  2. 添加大头针：通过MapController的addMarker方法在地图上添加大头针。可以通过MarkerOptions设置大头针的位置、图标等属性。

  3. 监听大头针点击事件：使用MapView的setOnMarkerClickListener方法监听大头针的点击事件。当用户点击大头针时，触发相应的回调函数。

  4. 显示弹窗组件：在回调函数中，使用Dialog或PopupWindow组件来显示弹窗。可以通过Dialog的setContentView方法设置弹窗内容，并通过show方法显示弹窗。

  5. 弹窗内容设置：在弹窗中展示所选位置的详细信息，如经纬度、地址等。可以通过TextView等组件来展示这些信息。

  6. 关闭弹窗：通过Dialog的dismiss方法关闭弹窗。

以下是一个简单的代码示例：

import { MapView, MapController, MarkerOptions, Dialog } from '@ohos/map';

// 初始化地图
const mapView = new MapView(context);
const mapController = mapView.getController();

// 添加大头针
const markerOptions = new MarkerOptions()
    .position({ latitude: 39.9042, longitude: 116.4074 })
    .title("北京")
    .icon("resources/base/media/marker.png");
const marker = mapController.addMarker(markerOptions);

// 监听大头针点击事件
mapView.setOnMarkerClickListener((marker) => {
    // 显示弹窗
    const dialog = new Dialog(context);
    dialog.setContentView("resources/base/layout/popup_layout.xml");
    dialog.show();
    
    // 设置弹窗内容
    const textView = dialog.findViewById("text_view");
    textView.setText(`位置：${marker.getPosition().latitude}, ${marker.getPosition().longitude}`);
    
    // 关闭弹窗
    dialog.findViewById("close_button").setOnClickListener(() => {
        dialog.dismiss();
    });
    
    return true;
});

在HarmonyOS鸿蒙NEXT中，实现地图大头针选择位置并显示弹窗组件的案例步骤如下：

  1. 地图组件：使用MapView组件显示地图。
  2. 大头针功能：通过MapView的onMarkerClick事件监听大头针点击。
  3. 弹窗组件：使用Dialog组件创建弹窗，展示点击位置的详细信息。
  4. 位置信息传递：在onMarkerClick事件中获取点击位置的相关信息，并将其传递给Dialog组件显示。

示例代码片段：

MapView mapView = findComponentById(ResourceTable.Id_mapview);
mapView.setOnMarkerClickListener((marker) -> {
    Dialog dialog = new Dialog(this);
    dialog.setContentText("位置信息: " + marker.getTitle());
    dialog.show();
    return true;
});

通过以上步骤，用户点击地图上的大头针时，将显示包含位置信息的弹窗。

回到顶部