tc-component v1.0.10

tc-component

tc-component 提供开箱即用的 app 同层渲染组件。

开发指南

安装

npm 安装

npm i tc-component -S

快速上手

引入 tc-component

在 main.js 中写入以下内容:

import Vue from "vue";
import tcComponent from "tc-component";
import "tc-component/lib/tc-component.css";
import App from "./App.vue";

Vue.use(tcComponent);

new Vue({
  el: "#app",
  render: (h) => h(App),
});

组件

提供组件

• tc-base 组件
• tc-map 组件

tc-base 组件

tc-base 组件为同层渲染基础组件，同层渲染组件由于 Android、ios 实现不同，并且在初始化过程中需要一些特殊处理，所以将同层渲染组件的特殊处理封装为一个基础组件，业务团队在使用时直接引用组件即可，不用再重复处理。

<tc-base
  :platform="platform"
  :initConfig="mapConfig"
  componentType="GaoDeMap"
  :webElementRegion="webElementRegion"
  :eventCallback="eventCallback"
  :initSuccess="initSuccess"
  :initError="initError"
/>

Attributes

回调函数

eventCallback

原生组件触发事件的回调函数，原生组件触发的所有事件都通过这个函数分发，回调参数见相对应的插件文档。

initSuccess

原生组件初始化成功后的回调函数，函数有两个参数：control、event，control为控制器，可以通过其调用原生插件的方法，event为原生组件初始化成功的事件对象，结构从相对应的插件文档中获取。

• control中的callNativeMethod方法

通过control对象中的callNativeMethod方法可以直接调用该组件对应原生插件的方法，方法名与插件文档中的方法名一致，如需要调用插件的的setWebElementRegions方法：control.callNativeMethod("setWebElementRegions", hotRegionData);,第一个参数为调用的方法名，后续参数为被调用函数所需的参数。

control对象上其他方法请不要随意调用。

initError

原生组件初始化失败的回调函数，参数为原生端返回的error对象，具体内容以对应插件文档为准

tc-map 组件

同层渲染地图组件，支持 web、android、ios 三端。

<tc-map
  :map-config="mapConfig"
  :custom-init="mapInit"
  :platform="platform"
  class="my-map"
  @layerClick="layerClick"
  @zoomChange="zoomchange"
  @mapClick="mapClick"
/>

准备工作

使用前先到高德地图开放平台申请相关AppKey。相关步骤如下:

1. Android 申请需要package和sha1，使用平台默认的签名文件时打包可使用以下sha1内容：

   生产环境：69:92:6F:98:03:ED:FF:56:C2:BD:6D:23:97:1A:AC:B5:4B:FB:63:3C
   其他环境：B0:24:17:1A:F3:90:2E:22:8D:96:BC:D6:45:B5:89:5B:46:5D:66:81

2. iOS 申请需要应用Bundle Id。

因苹果审核机制，对位置使用权限需要进行授权，以下字段需要根据 APP 具体的使用权限级别，在隐私权限 hook 中添加详细的使用说明。

hook 示例

// 获取info.plist配置文件对象：plistObj
......
plistObj.NSLocationUsageDescription = '如果不允许，将无法进行后续的业务操作';
plistObj. NSLocationWhenInUseUsageDescription = '如果不允许，可能导致应用功能无法正常使用';
plistObj. NSLocationAlwaysUsageDescription = '如果不允许，可能导致应用功能无法正常使用';
plistObj. NSLocationAlwaysAndWhenInUseUsageDescription = '如果不允许，可能导致应用功能无法正常使用';
plistObj. NSLocationTemporaryUsageDescriptionDictionary = {
    "FullAccuracyUsageDescription":'如果不允许，可能导致应用获取不到精确的位置信息';
};

3. web 端 key 直接申请即可

4. 注册成功后，将获取到的AppKey在平台中添加插件时填到GAODEMAP_KEY_IOS和GAODEMAP_KEY_ANDRIOD中，web 端的 key 在使用组件时通过参数传入即可。

Map Attributes

map-config结构说明

pointsData结构说明

// 示例
[
  {
    id: "1", // 唯一id
    type: "icon", // 图标类型
    position: [113.93808453072029, 22.527625825601213], // 位置[longitude, latitude]
    icon: "iconicn_point", // 普通状态下的icon
    selectIcon: "iconicn_point_active", // 选中状态下的icon
  },
  {
    id: "2",
    type: "iconText", // 图标文本类型
    position: [113.95380898080109, 22.534244422535767],
    icon: "iconicn_subway", // 普通状态下的icon
    selectIcon: "iconicn_subway_active", // 选中状态下的icon
    text: "丽雅查尔顿酒店",
  },
  {
    id: "3",
    type: "polyline", // 线类型
    strokeOpacity: 1.0,
    strokeColor: "#0D86FF",
    selectStrokeColor: "#EB3B3B",
    strokeWeight: 4.0,
    path: [
      [113.94667966936146, 22.53063229103582],
      [113.93727852692508, 22.52368523762034],
    ],
  },
  {
    id: "4",
    type: "polygon", // 面类型
    fillOpacity: 0.35,
    fillColor: "#0D86FF",
    selectFillColor: "#EB3B3B",
    strokeOpacity: 1.0,
    strokeColor: "#0D86FF",
    selectStrokeColor: "#EB3B3B",
    strokeWeight: 4.0,
    path: [
      [113.9370357870134, 22.54519791844932],
      [113.9430157719098, 22.545289575836016],
      [113.93965630517611, 22.541078227653045],
    ],
  },
  {
    id: "5",
    type: "circle", // 圆类型
    position: [113.9335140466371, 22.530198729807303],
    title: "深圳大学",
    content: "深圳大学学生楼",
  },
  {
    id: "6",
    type: "bubble", // 气泡类型
    position: [113.9462531981354, 22.527126599830584],
    title: "科苑",
    count: 5,
    opacity: 0.9,
    selectColor: "#EB3B3B",
  },
];

map方法

下面的所有方法都支持 callback 与 promise 回调

1. 获取当前地图视图中的城市信息
2. 定位到当前位置
3. 设置地图的中心点
4. 获取地图缩放级别
5. 设置地图缩放级别
6. 移动地图
7. 同时设置地图缩放级别和中心点
8. 调整地图到合适位置
9. 切换图层
10. 绘制建筑物图层
11. 设置地图的旋转角度
12. 获取地图的旋转角度
13. 设置地图倾斜度
14. 获取地图倾斜度

获取当前地图视图中的城市信息

map.getCity(callback)

city结构说明

// 示例
map.getCity(function(city) {
  console.log("getCity", city);
});

定位到当前位置

mGaoDeMapTCRender.geolocationCurrent(show, callback)

注：设为false时，iOS会回到当前位置，Android位置不会变更

// 示例
mGaoDeMapTCRender.geolocationCurrent(
  true, 
  function(loc) {
    console.log(loc);
  }
);

设置地图的中心点

map.setCenter(lonLat)

// 示例
map.setCenter([121.501654, 31.238068]);

获取地图缩放级别

map.getZoom(callback)

// 示例
map.getZoom(function(zoom) {
  console.log("getZoom", zoom);
});

设置地图缩放级别

map.setZoom(zoom)

// 示例
map.setZoom(3);

移动地图

map.panBy(dx, dy)

// 示例
map.panBy(100, 100])

同时设置地图缩放级别和中心点

map.setZoomCenter(zoom, lonLat)

当需要同时修改地图缩放等级与地图中心点时请使用该方法，分开调用 setCenter 与 setZoom 在 android 会有定位不准的问题！

// 示例
map.setZoomCenter(3.0, [121.501654, 31.238068]);

调整地图到合适位置

map.setFitView()

// 示例
map.setFitView();

切换图层

map.setMapType(type)

绘制建筑物图层

map.renderBuildings(overlays)

overlay结构说明

// 示例
map.renderBuildings(
    [
        {
            "sideColor": "#E6B0E2FF", // 设置建筑物侧面颜色值
            "topColor": "#E65EB9FF", // 设置建筑物顶部颜色值
            "path": [ // 设置建筑物围栏坐标列表
                [
                    113.95420058331057,
                    22.540868895523726
                ],
                [
                    113.95418985447468,
                    22.54258813461517
                ],
                [
                    113.95774109914964,
                    22.542944861657737
                ],
                [
                    113.95750506476037,
                    22.540911009705425
                ]
            ]
        },
        {
            "sideColor": "#E6FFF0A3", // 设置建筑物侧面颜色值
            "topColor": "#E6FFD752", // 设置建筑物顶部颜色值
            "path": [ // 设置建筑物围栏坐标列表
                [
                    113.957941,
                    22.542938
                ],
                [
                    113.958821,
                    22.543076
                ],
                [
                    113.958778,
                    22.542284
                ],
                [
                    113.957963,
                    22.541848
                ]
            ],
        }
    ]
)

设置地图的旋转角度

mGaoDeMapTCRender.setBearing(bearing)

// 示例
mGaoDeMapTCRender.setBearing(3.0);

获取地图的旋转角度

mGaoDeMapTCRender.getBearing(callback)

// 示例
mGaoDeMapTCRender.getBearing(
  function (bearing) {
    console.log('getBearing', bearing);
  }
);

设置地图倾斜度

mGaoDeMapTCRender.setTilt(tilt)

// 示例
mGaoDeMapTCRender.setTilt(3.0);

获取地图倾斜度

mGaoDeMapTCRender.getTilt(callback)

// 示例
mGaoDeMapTCRender.getTilt(
  function (tilt) {
    console.log('getTilt', tilt);
  }
);

Map Event

特别说明

1. 由于 android 实现方案的问题，当前页面元素变化时需要同时更新 webElementRegion 的值。
2. 需要重新刷新地图上的覆盖物时，更新 pointsData 的值即可