HarmonyOS Next系列之地图组件(Map Kit)使用(九)

系列文章目录

HarmonyOS Next 系列之省市区弹窗选择器实现(一)
HarmonyOS Next 系列之验证码输入组件实现(二)
HarmonyOS Next 系列之底部标签栏TabBar实现(三)
HarmonyOS Next 系列之HTTP请求封装和Token持久化存储(四)
HarmonyOS Next 系列之从手机选择图片或拍照上传功能实现(五)
HarmonyOS Next 系列之可移动悬浮按钮实现(六)
HarmonyOS Next 系列之沉浸式状态实现的多种方式(七)
HarmonyOS Next系列之Echarts图表组件(折线图、柱状图、饼图等)实现(八)
HarmonyOS Next系列之地图组件(Map Kit)使用(九)


文章目录

  • 系列文章目录
  • 前言
  • 一、地图组件正确渲染步骤总结
  • 二、详细步骤
    • 1、手动新建私钥和证书请求文件
    • 2、AppGallery 网站上创建项目和应用、申请调试证书或生产证书和Profile文件,并开通地图服务
    • 3 、项目代码中修改包名和配置client_id
    • 4、手动修改签名配置
    • 5、AppGallery 添加证书指纹、添加公钥指纹
    • 6、引入组件渲染
  • 三、地图组件常用功能
    • 1.开启我的位置
    • 2.移动地图位置
    • 3.地图标点
      • 默认图标
      • 加载本地自定义图标:
      • 加载网络图标:
    • 4.信息窗口
      • 默认信息窗口
      • 自定义信息窗口
    • 5.画路线
    • 6.标点聚合
  • 总结


前言

HarmonyOS Next(基于API12)自带地图Map Kit使用——本文将讲述如何通过手动生成签名证书、申请地图权限、地图展示和地图常用功能示例讲解。

在这里插入图片描述


一、地图组件正确渲染步骤总结

1、手动新建私钥和证书请求文件
2、AppGallery 网站上创建项目和应用、申请调试/生产证书、Profile文件,并开通地图服务
3、项目代码中修改包名、配置client_id
4、手动修改签名配置
5、AppGallery 添加证书指纹、公钥指纹
6、引入组件渲染

以上缺少任何步骤地图都无法正常显示,很多人没去手动创建签名证书或者未去AppGallery 申请地图服务,直接引用map组件导致渲染出来空白

空白示例:
在这里插入图片描述

二、详细步骤

1、手动新建私钥和证书请求文件

(1)开发工具—构建—生成私钥和证书请求文件

在这里插入图片描述

(2)点击New

在这里插入图片描述

(3)选择文件保存目录,设置密码后点击OK

在这里插入图片描述

(4)如下图设置alias、个人信息后点击Next

在这里插入图片描述

(5)弹出如下确认框,选择csr file文件保存目录后点击Finish

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/dc409e44a7b043768f74140f4d51efdb.png

此时在第三小步选择的目录下生成了证书请求文件(.csr格式)和证书文件(.p12格式),记住位置后续需要使用

在这里插入图片描述


2、AppGallery 网站上创建项目和应用、申请调试证书或生产证书和Profile文件,并开通地图服务

(1)AppGallery 网站,我的项目-添加项目

在这里插入图片描述
在这里插入图片描述

(2)在项目里面添加应用,设置应用包名和名称

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(3)开通地图服务

在这里插入图片描述

如下图,成功开通

在这里插入图片描述


3 、项目代码中修改包名和配置client_id

(1)包名修改
AppScope/app.json5

在这里插入图片描述

(2)配置client_id
entry/src/main/module.json5,module下
添加:

 "metadata": [{"name": "client_id","value": "111xxxxxxx"  // 配置Client ID,从AppGallery 网站获取}]

在这里插入图片描述

其中 Client ID从AppGallery 我的项目里面获取

在这里插入图片描述


4、手动修改签名配置

(1)从AppGallery 新建并下载调试证书或发布证书(调试下载调试证书,上线下载开发证书)

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

成功后下载,文件格式为(.cer)

(2)从AppGallery 新建并下载Profile文件

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

成功后下载,文件格式为(.p7b)

(3)修改签名配置

删除原来的签名配置:
项目根目录/build-profile.json5 打开删除app下signingConfigs字段内容

在这里插入图片描述

开发工具—文件—项目结构—Signing Configs ,只勾选SupportHarmonyOS,进行手动签名

在这里插入图片描述

点击ok后build-profile.json5签名配置已更新

在这里插入图片描述


5、AppGallery 添加证书指纹、添加公钥指纹

开发工具—文件—项目结构—Signing Configs
点击右边指纹图标

在这里插入图片描述

复制证书指纹

在这里插入图片描述

在AppGallery—我的项目下添加证书指纹

在这里插入图片描述

添加公钥指纹

在这里插入图片描述
在这里插入图片描述

至此所有设置已完成(设置完可能有几分钟的延迟生效),之后就可以愉快开发了


6、引入组件渲染

核心提炼:

组件:
MapComponent({ mapOptions,mapCallback })
其中mapOptions地图初始化配置参数,mapCallback 地图初始化完成回调,回调函数返回mapController(地图控制器),后续其他功能将通过调用mapController API实现

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index{private mapOption?: mapCommon.MapOptions; //地图配置private callback?: AsyncCallback<map.MapComponentController>; //初始化完成回调private mapController?: map.MapComponentController; //地图控制器aboutToAppear(): void {// 地图初始化参数,设置地图中心点坐标及层级this.mapOption = {position: {target: {         latitude: 39.9, //纬度longitude: 116.4  //经度},zoom: 10, //缩放层级//compassControlsEnabled:true,//是否显示指南针//zoomControlsEnabled:true,//是否展示缩放按钮//myLocationControlsEnabled:fasle,//是否展示我的位置按钮//scaleControlsEnabled:false,//是否展示比例尺}};// 地图初始化的回调this.callback = async (err, mapController) => {if (!err) {// 获取地图的控制器类,用来操作地图this.mapController = mapController;}};}build() {Stack() {// 调用MapComponent组件初始化地图MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback }).width('100%').height('100%');}.height('100%')}
}

运行效果:
在这里插入图片描述

更多的mapOption属性请 查看官网文档


三、地图组件常用功能

1.开启我的位置

我的位置按钮位于地图右下角默认未开启
在这里插入图片描述

关键代码:

// 启用我的位置图层
this.mapController.setMyLocationEnabled(true);
// 启用我的位置按钮
this.mapController.setMyLocationControlsEnabled(true)

开启我的位置功能需要用到定位权限如下:

ohos.permission.APPROXIMATELY_LOCATION和ohos.permission.LOCATION

使用前需要先申请权限,申请成功后再调用上述代码,地图初始化后定位功能才能生效

entry/src/module.json5添加权限

requestPermissions: [{"name": "ohos.permission.INTERNET",},{"name": "ohos.permission.APPROXIMATELY_LOCATION","reason": "$string:reason","usedScene": {"abilities": ["EntryAbility"],"when": "inuse"}},{"name": "ohos.permission.LOCATION","reason": "$string:reason","usedScene": {"abilities": ["EntryAbility"],"when": "inuse"}}]

Index.ets

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl';
@Entry
@Component
struct Index {private mapOption?: mapCommon.MapOptions; //地图配置private callback?: AsyncCallback<map.MapComponentController>; //初始化完成回调private mapController?: map.MapComponentController; //地图控制器aboutToAppear(): void {// 地图初始化参数,设置地图中心点坐标及层级this.mapOption = {position: {target: {latitude: 39.9, //纬度longitude: 116.4 //经度},zoom: 10 //缩放级别}};// 地图初始化的回调this.callback = async (err, mapController) => {if (!err) {// 获取地图的控制器类,用来操作地图this.mapController = mapController;//申请权限let list:Array<Permissions>=['ohos.permission.APPROXIMATELY_LOCATION','ohos.permission.LOCATION']try {await this.applyPermission(getContext(this), list)//以下2句启用需在权限申请完后调用,否则首次定位功能不生效// 启用我的位置图层this.mapController.setMyLocationEnabled(true);// 启用我的位置按钮this.mapController.setMyLocationControlsEnabled(true)}catch (e){}}};}//申请权限applyPermission(context: Context,permissions: Array<Permissions>): Promise<boolean> {let atManager = abilityAccessCtrl.createAtManager();return new Promise((resolve: (res: boolean) => void, reject: (e: ESObject) => void) => {atManager.requestPermissionsFromUser(context, permissions).then((data) => {let grantStatus: Array<number> = data.authResults;resolve(grantStatus.every(item => item === 0))}).catch((err: ESObject) => {reject(err)})})}build() {Stack() {// 调用MapComponent组件初始化地图MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback }).width('100%').height('100%');}.height('100%')}
}

说明:地图初始化回调函数内进行定位权限申请,申请成功后启用我的位置图层和启用我的位置按钮,权限申请只会首次弹窗提示,允许后再次运行不会弹窗

运行效果:
在这里插入图片描述


2.移动地图位置

api:

// 以非动画方式移动地图相机
mapController.moveCamera(cameraUpdate);

// 以动画方式移动地图相机
mapController.animateCamera(cameraUpdate, 1000);

示例:

 // 创建CameraUpdate对象let cameraPosition: mapCommon.CameraPosition = {target: {//地图中心点经纬度latitude: 32.0,longitude: 118.0},zoom: 15,//缩放等级};let cameraUpdate = map.newCameraPosition(cameraPosition);// 以非动画方式移动地图相机this.mapController?.moveCamera(cameraUpdate);// 以动画方式移动地图相机this.mapController?.animateCamera(cameraUpdate, 1000);

3.地图标点

api:

mapController.addMarker(markerOptions);

示例:

默认图标

        let markerOptions: mapCommon.MarkerOptions = {position: {//标点经纬度latitude: 24.2646,longitude: 118.0404},// rotation: 0,//标记旋转角度//  alpha: 1,//标记透明度// clickable: true,//是否可点击// draggable: true, //是否可拖拽// icon:'xxxxx'//自定义图标,不设显示默认图标};// 创建Markerthis.marker = await this.mapController.addMarker(markerOptions);

在这里插入图片描述

加载本地自定义图标:

     let markerOptions: mapCommon.MarkerOptions = {position: {//标点经纬度latitude: 24.4846,longitude: 118.1304},icon:$r('app.media.remark')//自定义图标,不设显示默认图标}  // 创建Markerthis.marker = await this.mapController.addMarker(markerOptions);   

在这里插入图片描述

本地图标存放在resources/rawfile或者resources/base/media

加载网络图标:

icon属性不支持直接引用在线图片url,但支持base64或者PixleMap类型,所以想要显示网络图片需要把图片转为base64或者PixelMap。
从官方文档看markerOptions属性未找到icon尺寸设置,像默认图标和本地图标和base64图标无法设置大小,想设置图标大小只能从PixelMap入手

代码示例:

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';
import http from '@ohos.net.http';
import { image } from '@kit.ImageKit';@Entry
@Component
struct Index {@State markerIcon: PixelMap | null = null//标点图标private mapOption?: mapCommon.MapOptions; //地图配置private callback?: AsyncCallback<map.MapComponentController>; //初始化完成回调private mapController?: map.MapComponentController; //地图控制器/*** //在线图片转PixelMap* @param imageUrl:在线图片链接* @param opt:图像解码设置选项* @returns Promise<PixelMap>*/imageToPixelMap(imageUrl: string, opt: image.DecodingOptions): Promise<PixelMap> {let httpRequest = http.createHttp()return new Promise((resolve: (pixleMap: PixelMap) => void, reject: (err: BusinessError) => void) => {httpRequest.request(imageUrl,(err, data) => {if (!err) {let arrayBuffer: ArrayBuffer = data.result as ArrayBufferlet imageSource: image.ImageSource = image.createImageSource(arrayBuffer);imageSource.createPixelMap(opt).then((pixelMap: image.PixelMap) => {resolve(pixelMap)}).catch((error: BusinessError) => {reject(error)})} else {reject(err)}})})}async aboutToAppear() {// 地图初始化参数,设置地图中心点坐标及层级this.mapOption = {position: {target: {latitude: 24.4846,longitude: 118.1304},zoom: 15, //缩放层级}};// 地图初始化的回调this.callback = async (err, mapController) => {if (!err) {// 获取地图的控制器类,用来操作地图this.mapController = mapController;let markerOptions: mapCommon.MarkerOptions = {position: {//标点经纬度latitude: 24.4846,longitude: 118.1304},icon: this.markerIcon ?? ''}// 创建Markerawait this.mapController?.addMarker(markerOptions);}};//设置图片120x120尺寸,单位pxlet opt: image.DecodingOptions = { desiredSize: { height: 120, width: 120 } }this.markerIcon = await this.imageToPixelMap('https://img2.baidu.com/it/u=2105446738,2493267053&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800', opt)}build() {Stack() {//防止异步问题if(this.markerIcon ){MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback }).width('100%').height('100%');}}.height('100%')}
}

运行效果:
在这里插入图片描述

更多markerOptions属性请查看官网文档


4.信息窗口

默认信息窗口

      //标点let markerOptions: mapCommon.MarkerOptions = {position: {//标点经纬度latitude: 24.4846,longitude: 118.1304},};// 创建Markerthis.marker = await this.mapController.addMarker(markerOptions);// 设置信息窗的标题this.marker.setTitle('厦门');// 设置信息窗的子标题this.marker.setSnippet('湖里区店');// 设置信息窗可点击this.marker.setClickable(true);// 设置信息窗的锚点位置this.marker.setInfoWindowAnchor(1,1);// 设置信息窗可见this.marker.setInfoWindowVisible(true);

在这里插入图片描述

自定义信息窗口

api提炼:

//MapComponent组件第三个参数传入自定义信息窗Builder
MapComponent({ mapOptions,mapCallback,customInfoWindow })

// 设置信息窗可见
marker.setInfoWindowVisible(true);

//监听标记点击事件
mapController.on(“markerClick”, (marker) => {
})

点击标点显示自定义信息窗示例:

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';@Entry
@Component
struct Index {private mapOption?: mapCommon.MapOptions; //地图配置private callback?: AsyncCallback<map.MapComponentController>; //初始化完成回调private mapController?: map.MapComponentController; //地图控制器private marker?: map.MarkeraboutToAppear(): void {// 地图初始化参数,设置地图中心点坐标及层级this.mapOption = {position: {target: {latitude: 24.4846,longitude: 118.1304},zoom: 15 //缩放级别}};// 地图初始化的回调this.callback = async (err, mapController) => {if (!err) {// 获取地图的控制器类,用来操作地图this.mapController = mapController;//标点let markerOptions: mapCommon.MarkerOptions = {position: {//标点经纬度latitude: 24.4846,longitude: 118.1304},clickable: true,title: '自定义标题'//窗口标题必须设置,不然窗口不显示};// 创建Markerthis.marker = await this.mapController.addMarker(markerOptions);//标点点击监听,点击标点显示信息窗口this.mapController.on("markerClick", (marker) => {// 设置信息窗的锚点位置this.marker?.setInfoWindowAnchor(2, 2);// 设置信息窗可见this.marker?.setInfoWindowVisible(true);});}};}// 自定义信息窗BuilderParam@BuilderParam customInfoWindow: ($$: map.MarkerDelegate) => void = this.customInfoWindowBuilder;// 自定义信息窗Builder@BuildercustomInfoWindowBuilder($$: map.MarkerDelegate) {Column() {Text('自定义信息窗口').fontColor(Color.White)}.width(150).height(50).backgroundColor(Color.Green).borderRadius(10).justifyContent(FlexAlign.Center)}build() {Stack({ alignContent: Alignment.BottomStart }) {// 调用MapComponent组件初始化地图MapComponent({mapOptions: this.mapOption, mapCallback: this.callback,customInfoWindow: this.customInfoWindow}).width('100%').height('100%');}.height('100%')}
}

运行效果:
在这里插入图片描述
ps:markerOptions的title属性必须设置,不然窗口无法正常显示


5.画路线

api提炼:

mapController.addPolyline(polylineOption);

示例:

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';@Entry
@Component
struct Index {private mapOption?: mapCommon.MapOptions; //地图配置private callback?: AsyncCallback<map.MapComponentController>; //初始化完成回调private mapController?: map.MapComponentController; //地图控制器private marker?: map.MarkeraboutToAppear(): void {// 地图初始化参数,设置地图中心点坐标及层级this.mapOption = {position: {target: {latitude: 31.98,longitude: 118.78},zoom: 15 //缩放级别}};// 地图初始化的回调this.callback = async (err, mapController) => {if (!err) {// 获取地图的控制器类,用来操作地图this.mapController = mapController;// polyline初始化参数let polylineOption: mapCommon.MapPolylineOptions = {points: [{longitude:118.78,latitude:31.975}, {longitude:118.78,latitude:31.982}, {longitude:118.79,latitude:31.985}],//所有点经纬度clickable: true,jointType: mapCommon.JointType.BEVEL,//拐点样式width: 10,//线宽color:0xffff00ff,//线颜色}// 创建polylineawait this.mapController.addPolyline(polylineOption);}};}build() {Stack({ alignContent: Alignment.BottomStart }) {// 调用MapComponent组件初始化地图MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback,  }).width('100%').height('100%');}.height('100%')}
}

运行效果:
在这里插入图片描述


6.标点聚合

api提炼:

mapController.addClusterOverlay(mapCommon.ClusterOverlayParams)

mapCommon.ClusterOverlayParams = { distance: Number, clusterItems: array },其中distance 表示2点之间距离多少vp开始聚合,clusterItems:带聚合点坐标

示例:

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';@Entry
@Component
struct Index {private mapOption?: mapCommon.MapOptions;private mapController?: map.MapComponentController;private callback?: AsyncCallback<map.MapComponentController>;aboutToAppear(): void {this.mapOption = {position: {target: {latitude: 31.98,longitude: 118.7},zoom: 7}}this.callback = async (err, mapController) => {if (!err) {this.mapController = mapController;// 生成待聚合点let clusterItem1: mapCommon.ClusterItem = {position: {latitude: 31.98,longitude: 118.7}};let clusterItem2: mapCommon.ClusterItem = {position: {latitude: 32.99,longitude: 118.9}};let clusterItem3: mapCommon.ClusterItem = {position: {latitude: 31.5,longitude: 118.7}};let clusterItem4: mapCommon.ClusterItem = {position: {latitude: 30,longitude: 118.7}};let clusterItem5: mapCommon.ClusterItem = {position: {latitude: 29.98,longitude: 117.7}};let clusterItem6: mapCommon.ClusterItem = {position: {latitude: 31.98,longitude: 120.7}};let clusterItem7: mapCommon.ClusterItem = {position: {latitude: 25.98,longitude: 119.7}};let clusterItem8: mapCommon.ClusterItem = {position: {latitude: 30.98,longitude: 110.7}};let clusterItem9: mapCommon.ClusterItem = {position: {latitude: 30.98,longitude: 115.7}};let clusterItem10: mapCommon.ClusterItem = {position: {latitude: 28.98,longitude: 122.7}};let array: Array<mapCommon.ClusterItem> = [clusterItem1,clusterItem2,clusterItem3,clusterItem4,clusterItem5,clusterItem6,clusterItem7,clusterItem8,clusterItem9,clusterItem10]//模拟更多点for(let index = 0; index < 100; index++){array.push(clusterItem1)}//模拟更多点for(let index = 0; index < 10; index++){array.push(clusterItem2)}// 生成聚合图层的入参 聚合distance设置为100vplet clusterOverlayParams: mapCommon.ClusterOverlayParams = { distance: 100, clusterItems: array };// 调用addClusterOverlay生成聚合图层await this.mapController.addClusterOverlay(clusterOverlayParams);}}}build() {Stack() {Column() {MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback }).width('100%').height('100%');}.width('100%')}.height('100%')}
}

运行效果:
在这里插入图片描述


总结

以上就是地图组件加载和最常用的功能示例讲解,官方地图组件还有很多其他功能诸如画圆形区域、点注释、覆盖物、动态轨迹等,更多使用请查看官方文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49520.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot(事务管理,异步任务,任务调度,整合Mail)

spring自身就集成了许多中间件&#xff0c;可以帮助我们进行日常的开发。 一&#xff1a;Spring Boot中的事务管理 spring事务管理有两种方式 编程式&#xff1a; 即&#xff1a;使用AOP中的切点&#xff0c;切面的知识&#xff0c;利用代理模式对事务进行管理&#xff0c;…

【面试】如果一个NPM包部分功能不满足需求,怎么办

在处理第三方npm包不满足特定需求时&#xff0c;有几种推荐的处理方法。直接修改node_modules中的代码虽然可行&#xff0c;但不推荐&#xff0c;因为这些改动在执行npm install或更新包时会丢失。以下是几种推荐的处理方法&#xff1a; 使用Fork 最常见的方式是Fork源代码。…

「运费速查神器」精明买家必备!一键查询1688供应商发货费用

对于从事跨境买家还是国内电商买家&#xff0c;在选品时&#xff0c;需要全面考虑商品成本&#xff0c;发货费用是供应链成本的重要组成部分。 原来如果我们在1688选品看供应商发货运费&#xff0c;需要一个个单独点击到商品的详情页去查看&#xff0c;再选择具体的收货地、再…

Elastic:监控不同于可观察性的 3 个原因

作者&#xff1a;来自 Elastic Observability Team 监控和可观察性经常互换使用&#xff0c;但它们并不完全相同。监控是可观察性的重要组成部分&#xff0c;但可观察性远远超出了传统监控实践的范围。 关键区别&#xff1a;监控从各个组件收集数据 —— 何时和什么&#xff0…

C/C++文件操作类实现

C文件操作类的实现与应用 在C编程中&#xff0c;文件操作是一项非常重要的任务。本文将介绍一个名为FileOperation的类&#xff0c;它提供了一系列用于文件和文件夹操作的方法&#xff0c;包括遍历文件夹、删除文件、获取指定文件、获取指定后缀的文件、复制文件、移动文件、重…

微信小程序-CANVAS写入图片素材、文字等数据生成图片

微信小程序中&#xff0c;CANVAS写入图片素材、文字等数据生成图片&#xff0c;最终可将生成的 base64 格式图片保存至相册操作 Tips&#xff1a; 1、canvas 标签默认宽度 300px、高度 150px canvas 生成图片时&#xff0c;写入图片素材、文字等数据前&#xff0c;需要根据实…

叶再豪降龙精英课程总结

文章目录 1.思维认知1.1 稻盛和夫成功公式1.2 龙头主升模式1.3 龙头主升-两种路径1.4 股市新手的炒股思路1.5 龙头案例1.6 降龙心法 2.情绪周期2.1 情绪周期2.1 情绪演绎周期2.2 情绪的四个部分2.2.1 指数的情绪周期2.2.3 热点情绪周期2.2.4 热点情绪演绎周期2.2.5 大热点支线2…

1.Vue基础(@事件名+v-show+created+v-bind)

Vue基础 文章目录 Vue基础一.Vue简介1.定义&#xff1a;2.特点&#xff1a;3.建立vue程序步骤 二.Vue的常用指令1.v-text和v-html2.v-show和v-if显示和隐藏数据3.v-on和事件名触发事件4.v-bind设置元素属性5.created页面加载运行的代码块6.v-for7.v-model双向绑定 一.Vue简介 …

深入了解路由器工作原理:从零开始的简单讲解

简介 在现代网络中&#xff0c;路由器扮演着至关重要的角色。它不仅连接了不同的设备&#xff0c;还确保数据能够准确地传输到目的地。本文将带你深入探讨路由器的工作原理&#xff0c;帮助网络基础小白们理解这一重要设备的基本功能。 路由器的构成 路由器是一种具有多个输入…

鸿蒙上的“adb“即hdc常用命令

hdc&#xff08;HarmonyOS Device Connector&#xff09;是为开发人员提供的用于调试的命令行工具&#xff0c;通过该工具可以在windows/linux/mac系统上与真实设备进行交互。 环境准备 hdc工具通过HarmonyOS SDK获取&#xff0c;存放于SDK的toolchains目录下&#xff0c;首次…

纷享AI | AI技术在销售场景的应用与实践

AI高速发展的今天&#xff0c;各行业都经历着深刻变革。但机遇与挑战总相伴相生&#xff0c;各企业负责人事实上也正面临着如何有效利用AI以完成赋能销售业务的难题。 毋庸置疑&#xff0c;跟上技术潮流&#xff0c;通过落实AI在销售场景中的应用进而取得卓越赋能成果必然是行…

Android TabLayout的简单用法

TabLayout 注意这里添加tab&#xff0c;使用binding.tabLayout.newTab()进行创建 private fun initTabs() {val tab binding.tabLayout.newTab()tab.text "模板库"binding.tabLayout.addTab(tab)binding.tabLayout.addOnTabSelectedListener(object : TabLayout.On…

深度学习系列一

激活函数 sigmod 梯度消失问题&#xff1a; sigmoid函数的导数在输入值较大或较小时接近于0。在反向传播过程中&#xff0c;这些小梯度会相乘&#xff0c;导致深层网络的梯度变得非常小。结果是&#xff0c;深层网络的参数几乎不会更新&#xff0c;训练变得非常困难。这就是为…

Passing output of 3DCNN layer to LSTM layer

题意&#xff1a;将3DCNN&#xff08;三维卷积神经网络&#xff09;层的输出传递给LSTM&#xff08;长短期记忆网络&#xff09;层 问题背景&#xff1a; Whilst trying to learn Recurrent Neural Networks(RNNs) am trying to train an Automatic Lip Reading Model using 3…

2024年上半年主要游戏安全风险,该如何应对?

随着游戏行业的蓬勃发展&#xff0c;安全问题也日益成为行业关注的焦点。面对 2024 年上半 年的游戏安全风险挑战&#xff0c;游戏行业需要不断加强技术能力&#xff0c;完善安全策略&#xff0c;与各方共 同努力&#xff0c;打造一个更加安全、公平的游戏环境。 游戏安全解…

Saga模式在分布式事务中的应用

在分布式系统中&#xff0c;事务管理是一个复杂且关键的问题。传统的ACID事务模型在单体应用中表现良好&#xff0c;但在分布式环境中&#xff0c;由于网络延迟、服务故障等因素&#xff0c;实现强一致性的事务变得非常困难。Saga模式作为一种分布式事务解决方案&#xff0c;通…

前端程序员会演化出类TA岗位吗?

前端开发领域确实在不断演化&#xff0c;随着技术的进步和行业的需求变化&#xff0c;前端程序员的角色和职责也在拓展&#xff0c;这自然催生了一系列相关的专业岗位。以下是一些从前端开发领域分化出来的专业角色&#xff0c;我们可以称之为“类TA”&#xff08;Technical Ad…

BGP之选路MED

原理概述 当一台BGP路由器中存在多条去往同一目标网络的BGP路由时&#xff0c;BGP协议会对这些BGP路由的属性进行比较&#xff0c;以确定去往该目标网络的最优BGP路由。BGP路由属性的比较顺序为Preferred Value属性、Local Preference属性、路由生成方式、AS_Path属性、Origin属…

学习记录——day18 数据结构 树

树的存储 1、顺序存储 对于普通的二叉树&#xff0c;不适合存储普通的二叉树顶序存储&#xff0c;一般用于存储完全二叉树而言&#xff0c;如果使用顺序存储&#xff0c;会浪费大量的存储空间&#xff0c;因为需要给没有节点的位置留出空间&#xff0c;以便于后期的插入。 所以…

20分钟上手新版Skywalking 9.x APM监控系统

Skywalking https://skywalking.apache.org/ Skywalking是专为微服务、云原生和基于容器的&#xff08;Kubernetes&#xff09;架构设计的分布式系统性能监控工具。 Skywalking关键特性 ● 分布式跟踪 ○ 端到端分布式跟踪。服务拓扑分析、以服务为中心的可观察性和API仪表板。…