鸿蒙Next实战：地图服务卡片、实现实时定位功能。

处于隐私保护借用熊猫基地定位，代码层实现了获取实时定位功能。

效果图

卡片效果如下：

关键技术及实现原理

卡片现有支持的基础组件有：button、calendar、chart、clock、divider、image、input、progress、span、text。

可以看到现有的卡片组件并不支持地图的开发，那么如何在卡片上显示地图尼？

通过 image 组件+高德地图 WebAPI 的静态地图即可实现地图的显示。

以上方便有开发卡片经验的开发者提供思路，具体方式方法如下：

从零开始

①创建项目

打开 DevEco Studio 工具，点击 File->New->New Project 创建一个 Empty Ability（JS），如下图，SDK 选用了 API 5。

新建

参数调整

创建后的结构：

首先修改程序的配置文件，打开 config.json，修改卡片支持类型情况：

添加权限：

配置完成还需要在 MainAbility 中显示的申明使用权限信息，详情参考文档配置相关内容。

打开 MainAbility 添加方法，并在 onStart 方法中调用 requestPermission()；方法：

  //获取权限
    private void requestPermission() {
        String[] permission = {
                "ohos.permission.LOCATION",
                "ohos.permission.LOCATION_IN_BACKGROUND",
        };
        List<String> applyPermissions = new ArrayList<>();
        for (String element : permission) {
            if (verifySelfPermission(element) != 0) {
                if (canRequestPermission(element)) {
                    applyPermissions.add(element);
                }
            }
        }
        requestPermissionsFromUser(applyPermissions.toArray(new String[0]), 0);
    }

②修改界面

打开 widget 下的 pages/index/imdex.hml：

<div class="container">
        <div class="container-inner" >
            <div class="container-img">
                <stack>
                    <image src="{
  {imgSrc}}" class="bg-img"></image>
                    <div class="container-show-text" >
                        <text class="show-text" >当前检索项：</text>
                        <text class="show-text" style="color: coral;"  >{
  {searchText}}</text>
                    </div>

                    <div class="container-map-ctl">
                        <button class="map-ctl-btn" @click="mapAddEvent"  type="circle">+</button>
                        <button class="map-ctl-btn" @click="mapReduceEvent"  type="circle">-</button>
                    </div>
                    <div show="{
  {showCtlButton}}" class="container-ctl" >
                        <button class="ctl-btn" @click="searchCheckedEvent0">{
  {searchBtns[0]}}</button>
                        <button class="ctl-btn" @click="searchCheckedEvent1">{
  {searchBtns[1]}}</button>
                        <button c