当前位置: 首页 > news >正文

Android 使用高德地图

一、获取高德平台key

【1】基于application包名&sha1值在高德控制台获取key值,详情参考:  获取Key-创建工程-开发指南-Android 地图SDK | 高德地图API

【2】在manifest中声明权限

【3】将拿到的key值在manifest中进行声明

<!--允许程序打开网络套接字-->
<uses-permission android:name="android.permission.INTERNET" />
<!--允许程序设置内置sd卡的写权限-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />   
<!--允许程序获取网络状态-->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<!--允许程序访问WiFi网络信息-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> 
<!--允许程序访问CellID或WiFi热点来获取粗略的位置-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 
<meta-dataandroid:name="com.amap.api.v2.apikey"android:value="xxxxxxxxxxxx" />

二、集成依赖

在app build.gradle文件中增加高德地图依赖

implementation("com.amap.api:3dmap:9.8.2")

三、显示地图

概述-Android 地图SDK | 高德地图API

在xml文件中声明MapView控件,并在class中重写 onCreate 方法(此方法必须重写),注意生命周期的管理

<com.amap.api.maps.MapViewandroid:id="@+id/map"android:layout_width="match_parent"android:layout_height="match_parent" />
private var mapView: MapView? = nulloverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.test_activity)mapView = findViewById(R.id.map)mapView?.onCreate(savedInstanceState)
}override fun onResume() {super.onResume()mapView?.onResume()
}override fun onPause() {super.onPause()mapView?.onPause()
}override fun onDestroy() {super.onDestroy()mapView?.onDestroy()
}override fun onSaveInstanceState(outState: Bundle) {super.onSaveInstanceState(outState)mapView?.onSaveInstanceState(outState)
}

地图默认中心点为北京天安门

四、高德地图具体使用

以下对于地图的控制使用之前需要拿到AMap对象

map = mapView?.map

1、切换城市中心点

private fun moveCenterTo(latLng: LatLng) {val cameraUpdate = CameraUpdateFactory.newLatLng(latLng)map?.moveCamera(cameraUpdate)
}

Android高德地图切换城市中心点展示

2、设置缩放级别

moveCamera(CameraUpdateFactory.zoomTo(14.0f))

3、绘制marker

companion object {private val MARKER1 = LatLng(40.02855349893361, 116.3052948784071)private val MARKER2 = LatLng(41.093445392798934, 116.11030767409169)
}val marker1: MarkerOptions = MarkerOptions().apply {position(MARKER1)
}
val marker2: MarkerOptions = MarkerOptions().apply {position(MARKER2)
}val list = ArrayList<MarkerOptions>()
list.add(marker1)
list.add(marker2)
map?.addMarkers(list, false)

如下图所示,不设置icon默认展示蓝色定位图标。

11

针对marker可以设置的属性:

position在地图上标记位置的经纬度值,必填参数
title点标记的标题
snippet点标记的内容
draggable点标记是否可拖拽
visible点标记是否可见
anchor点标记的锚点
alpha点的透明度

public final java.util.ArrayList<Marker> addMarkers(java.util.ArrayList<MarkerOptions> options, boolean moveToCenter)

在地图上添一组图片标记(marker)对象,并设置是否改变地图状态以至于所有的marker对象都在当前地图可视区域范围内显示。

参数:

options - 多个markerOptions对象,它们分别定义了对应marker的属性信息。

moveToCenter - 是否改变地图状态,默认为false。

返回:

返回一组被添加的marker对象。

4、绘制折线

val latLngList = ArrayList<LatLng>()
latLngList.add(MARKER1)
latLngList.add(MARKER2)
map?.addPolyline(PolylineOptions().addAll(latLngList).width(3f).color(Color.RED)
)

5、轨迹

SmoothMoveMarker(map).apply {
setDescriptor(BitmapDescriptorFactory.fromResource(R.drawable.smooth))setPoints(latLngList)setTotalDuration(5)startSmoothMove()}

6、两点之间距离计算

AMapUtils.calculateLineDistance(latLng1,latLng2)

7、切换地图图层

【1】预设模式

mapType = AMap.MAP_TYPE_NIGHT

【2】在线自定义模式

val options = CustomMapStyleOptions().apply {isEnable = truestyleId = ""
}
map?.setCustomMapStyle(options)

8、手势交互

map?.uiSettings.let {it.isRotateGesturesEnabled = falseit.isZoomControlsEnabled = falseit.isTiltGesturesEnabled = false
}

更多设置可参考:https://a.amap.com/lbs/static/unzip/Android_Map_Doc/3D/index.html?overview-summary.html

9、地图状态监听

            setOnMapLoadedListener(object : AMap.OnMapLoadedListener {override fun onMapLoaded() {Log.e(TAG, "onMapLoaded...")}})//自带放大缩小接口setOnCameraChangeListener(object : AMap.OnCameraChangeListener {override fun onCameraChange(p0: CameraPosition?) {//Log.e(TAG, "onCameraChange + ${p0?.toString()}")}override fun onCameraChangeFinish(p0: CameraPosition?) {Log.e(TAG, "onCameraChangeFinish + ${p0?.toString()}")}})//map point点击事件addOnMapClickListener(object : AMap.OnMapClickListener {override fun onMapClick(p0: LatLng?) {Log.e(TAG, "onMapClick + ${p0?.toString()}")}})//地图自带poi点击事件addOnPOIClickListener(object : AMap.OnPOIClickListener {override fun onPOIClick(p0: Poi?) {Log.e(TAG, "onPOIClick + ${p0?.toString()}")}})addOnMarkerClickListener(object : AMap.OnMarkerClickListener {override fun onMarkerClick(p0: Marker?): Boolean {Log.e(TAG, "onMarkerClick + ${p0?.id}")return true}})

10、截图功能

拿到bitmap对象进行处理

map?.getMapScreenShot(object : AMap.OnMapScreenShotListener {override fun onMapScreenShot(p0: Bitmap?) {TODO("Not yet implemented")}override fun onMapScreenShot(p0: Bitmap?, p1: Int) {TODO("Not yet implemented")}})

五、代码

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><com.amap.api.maps.MapViewandroid:id="@+id/map"android:layout_width="match_parent"android:layout_height="match_parent" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="20dp"android:gravity="center"android:orientation="horizontal"><TextViewandroid:id="@+id/bj"android:layout_width="60dp"android:layout_height="wrap_content"android:background="@drawable/button_bg"android:gravity="center"android:padding="10dp"android:text="北京"android:textSize="18dp" /><TextViewandroid:id="@+id/gz"android:layout_width="60dp"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:background="@drawable/button_bg"android:gravity="center"android:padding="10dp"android:text="广州"android:textSize="18dp" /><TextViewandroid:id="@+id/xa"android:layout_width="60dp"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:background="@drawable/button_bg"android:gravity="center"android:padding="10dp"android:text="西安"android:textSize="18dp" /><ImageViewandroid:id="@+id/share"android:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="20dp"android:scaleType="fitXY"android:src="@drawable/screenshot" /></LinearLayout></FrameLayout>
package com.example.myapplicationimport android.graphics.Bitmap
import android.graphics.Color
import android.location.Location
import android.os.Bundle
import android.util.Log
import android.widget.ImageView
import android.widget.TextView
import androidx.activity.ComponentActivity
import com.amap.api.maps.AMap
import com.amap.api.maps.CameraUpdateFactory
import com.amap.api.maps.MapView
import com.amap.api.maps.model.BitmapDescriptorFactory
import com.amap.api.maps.model.CameraPosition
import com.amap.api.maps.model.LatLng
import com.amap.api.maps.model.Marker
import com.amap.api.maps.model.MarkerOptions
import com.amap.api.maps.model.Poi
import com.amap.api.maps.model.PolylineOptions
import com.amap.api.maps.utils.overlay.SmoothMoveMarkerclass TestActivity : ComponentActivity() {private var mapView: MapView? = nullprivate var map: AMap? = nulloverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.test_activity)initMap(savedInstanceState)initView()}private fun initView() {findViewById<TextView>(R.id.bj).setOnClickListener { moveCenterTo(LATLNG_BJ) }findViewById<TextView>(R.id.gz).setOnClickListener { moveCenterTo(LATLNG_GZ) }findViewById<TextView>(R.id.xa).setOnClickListener { moveCenterTo(LATLNG_XA) }findViewById<ImageView>(R.id.share).setOnClickListener {map?.getMapScreenShot(object : AMap.OnMapScreenShotListener {override fun onMapScreenShot(p0: Bitmap?) {TODO("Not yet implemented")}override fun onMapScreenShot(p0: Bitmap?, p1: Int) {TODO("Not yet implemented")}})}}private fun initMap(savedInstanceState: Bundle?) {mapView = findViewById(R.id.map)mapView?.onCreate(savedInstanceState)mapView?.let {map = it.map}map?.apply {uiSettings.let {it.isRotateGesturesEnabled = falseit.isZoomControlsEnabled = falseit.isTiltGesturesEnabled = false}moveCamera(CameraUpdateFactory.zoomTo(8.0f))//自定义图层
//            val options = CustomMapStyleOptions().apply {
//                isEnable = true
//                styleId = ""
//            }
//            setCustomMapStyle(options)//            mapType = AMap.MAP_TYPE_NIGHTsetOnMapLoadedListener(object : AMap.OnMapLoadedListener {override fun onMapLoaded() {Log.e(TAG, "onMapLoaded...")//AnimatorUtil.obtainLinePointF(mapView, MARKER1, MARKER2)
//                    Handler().postDelayed(object : Runnable{
//                        override fun run() {
//                            AnimatorUtil.obtainLinePointF(mapView, MARKER2, MARKER3)
//                        }
//                    }, 500)}})//自带放大缩小接口setOnCameraChangeListener(object : AMap.OnCameraChangeListener {override fun onCameraChange(p0: CameraPosition?) {//Log.e(TAG, "onCameraChange + ${p0?.toString()}")}override fun onCameraChangeFinish(p0: CameraPosition?) {Log.e(TAG, "onCameraChangeFinish + ${p0?.toString()}")}})//map point点击事件addOnMapClickListener(object : AMap.OnMapClickListener {override fun onMapClick(p0: LatLng?) {Log.e(TAG, "onMapClick + ${p0?.toString()}")}})//地图自带poi点击事件addOnPOIClickListener(object : AMap.OnPOIClickListener {override fun onPOIClick(p0: Poi?) {Log.e(TAG, "onPOIClick + ${p0?.toString()}")}})addOnMarkerClickListener(object : AMap.OnMarkerClickListener {override fun onMarkerClick(p0: Marker?): Boolean {Log.e(TAG, "onMarkerClick + ${p0?.id}")return true}})setOnMyLocationChangeListener(object : AMap.OnMyLocationChangeListener {override fun onMyLocationChange(p0: Location?) {Log.e(TAG, "setOnMyLocationChangeListener + ${p0?.toString()}")p0?.let {moveCamera(CameraUpdateFactory.newLatLng(LatLng(it.latitude, it.longitude)))}}})//绘制marker点val marker1: MarkerOptions = MarkerOptions().apply {position(MARKER1)}val marker2: MarkerOptions = MarkerOptions().apply {position(MARKER2)}val list = ArrayList<MarkerOptions>()list.add(marker1)list.add(marker2)addMarkers(list, false)//            val builder = LatLngBounds.builder().apply {
//                include(MARKER1)
//                include(MARKER2)
//                include(MARKER3)
//                include(MARKER4)
//            }
//            val bounds = builder.build()
//            moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 300))//绘制marker折线val latLngList = ArrayList<LatLng>()latLngList.add(MARKER1)latLngList.add(MARKER2)addPolyline(PolylineOptions().addAll(latLngList).width(3f).color(Color.RED))//轨迹SmoothMoveMarker(map).apply {setDescriptor(BitmapDescriptorFactory.fromResource(R.drawable.smooth))setPoints(latLngList)setTotalDuration(5)startSmoothMove()}}}private fun moveCenterTo(latLng: LatLng) {val cameraUpdate = CameraUpdateFactory.newLatLng(latLng)map?.moveCamera(cameraUpdate)}override fun onResume() {super.onResume()mapView?.onResume()}override fun onPause() {super.onPause()mapView?.onPause()}override fun onDestroy() {super.onDestroy()mapView?.onDestroy()}override fun onSaveInstanceState(outState: Bundle) {super.onSaveInstanceState(outState)mapView?.onSaveInstanceState(outState)}companion object {private const val TAG = "TestActivity"private val MARKER1 = LatLng(40.02855349893361, 116.3052948784071)private val MARKER2 = LatLng(41.093445392798934, 116.11030767409169)private val LATLNG_BJ = LatLng(39.90508988475248, 116.4083842390264)private val LATLNG_GZ = LatLng(23.11523439186301, 113.24706837513949)private val LATLNG_XA = LatLng(34.321288624880815, 108.94042782381482)}
}

相关文章:

Android 使用高德地图

一、获取高德平台key 【1】基于application包名&sha1值在高德控制台获取key值&#xff0c;详情参考&#xff1a; 获取Key-创建工程-开发指南-Android 地图SDK | 高德地图API 【2】在manifest中声明权限 【3】将拿到的key值在manifest中进行声明 <!--允许程序打开网络…...

从redis setnx 来看看分布式锁

什么是分布式锁 分布式锁&#xff08;多服务共享锁&#xff09;在分布式的部署环境下&#xff0c;通过锁机制来让多客户端互斥的对共享资源进行访问/操作。 为什么需要分布式锁 在单体应用服务里&#xff0c;不同的客户端操作同一个资源&#xff0c;我们可以通过操作系统提供…...

校园网网络规划与设计——计算机网络实践报告

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 目录 一、设计目的 二、软硬件环境 三、理论基础 四、设计方案 五、网络配置步骤 六、设计过程中出现的问题及相应解决办法 八、参考资料 一、设计目的 深入理解网络工程的三层层次设计模型&#xff1b; 掌握网络…...

Qt QScrollArea 不显示滚动条 不滚动

使用QScrollArea时&#xff0c;发现添加的控件超出QScrollArea 并没有显示&#xff0c;且没有滚动条效果 原因是 scrollArea指的是scrollArea控件本身的大小&#xff0c;肉眼能看到的外形尺寸。 scrollAreaWidgetContents指的是scrollArea控件内部的显示区域&#xff0c;里面可…...

【SVN在Linux下的常用指令】

windows下的TortoiseSVN是资源管理器的一个插件&#xff0c;以覆盖图标表示文件状态&#xff0c;几乎所以命令都有图形界面支持&#xff0c;比较好用&#xff0c;这里就不多说。主要说说linux下svn的使用&#xff0c;因为linux下大部分的操作都是通过命令行来进行&#xff0c;所…...

2024 高级前端面试题之 Node 「精选篇」

该内容主要整理关于 Node 模块的相关面试题&#xff0c;其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。 Node模块精选篇 1. package.json版本号规则2. package.json 与 package-lock.json 的关3. npm 模块安装机制4. 模块化的差异 AMD CMD COMMONJS ESMODUL5. No…...

linux麒麟系统安装mongodb7.0

1.mogedb下载 下载的是他tar包 https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel80-7.0.5.tgz wget -o https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel80-7.0.5.tgz 也可以下载rpm包 2.将包上传至服务器并解压 #进入目录 并解压 cd /opt/ tar…...

Spring声明式事务

1.概念 事务就是用户定义的一系列执行SQL语句的操作, 这些操作要么完全地执行&#xff0c;要么完全地都不执行&#xff0c; 它是一个不可分割的工作执行单元 一个使用Mybatis-Spring的主要原因是它允许Mybatis参与到Spring的事务管理中&#xff0c;而不是给Mybatis创建一个新的…...

PyTorch深度学习实战(34)——Pix2Pix详解与实现

PyTorch深度学习实战&#xff08;34&#xff09;——Pix2Pix详解与实现 0. 前言1. 模型与数据集1.1 Pix2Pix 基本原理1.2 数据集分析1.3 模型构建策略 2. 实现 Pix2Pix 生成图像小结系列链接 0. 前言 Pix2Pix 是基于生成对抗网络 (Convolutional Generative Adversarial Netwo…...

第96讲:MySQL高可用集群MHA的核心概念以及集群搭建

文章目录 1.MHA高可用数据库集群的核心概念1.1.主从复制架构的演变1.2.MHA简介以及架构1.3.MHA的软件结构1.4.MHA Manager组件的启动过程1.5.MHA高可用集群的原理 2.搭建MHA高可用数据库集群2.1.环境架构简介2.2.搭建基于GTID的主从复制集群2.2.1.在三台服务器中分别搭建MySQL实…...

外星人入侵(python)

前言 代码来源《python编程从入门到实践》Eric Matthes 署 袁国忠 译 使用软件&#xff1a;PyCharm Community Editor 2022 目的&#xff1a;记录一下按照书上敲的代码 alien_invasion.py 游戏的一些初始化设置&#xff0c;调用已经封装好的函数方法&#xff0c;一个函数的…...

Unity中开发程序打包发布

添加ESC脚本 使用Unity打包发布的过程中&#xff0c;考虑到打开的程序会处于全屏界面&#xff0c;而此时我们又会有退出全屏的需求&#xff0c;因此需要添加ESC脚本&#xff0c;当我们单击ESC脚本的过程中&#xff0c;退出全屏模式。 在Assets/Scenes下&#xff0c;创建esc.cs…...

2024.2.1日总结

web的运行原理&#xff1a; 用户通过浏览器发送HTTP请求到服务器&#xff08;网页操作&#xff09;。web服务器接收到用户特定的HTTP请求&#xff0c;由web服务器请求信息移交给在web服务器中部署的javaweb应用程序&#xff08;Java程序&#xff09;。启动javaweb应用程序执行…...

​LeetCode解法汇总2670. 找出不同元素数目差数组

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 给你一个下…...

STM32目录结构

之前一直头疼的32目录&#xff0c;比51复杂&#xff0c;又没有C规律&#xff0c;也不像python脚本文件关联不强&#xff0c;也不像工整的FPGA工程&#xff0c;编的时候到处放&#xff0c;爆出的错千奇百怪。短暂整理了一个&#xff0c;还是没有理得很轻。 startup_stm32f10x_m…...

算法专题:记忆搜索

参考练习习题总集 文章目录 前置知识练习习题87. 扰乱字符串97. 交错字符串375. 猜数字大小II403. 青蛙过河464. 我能赢吗494. 目标和552. 学生出勤记录II576. 出借的路径数 前置知识 没有什么特别知识&#xff0c;只有一些做题经验。要做这类型的题目&#xff0c;首先写出暴…...

【数据分享】1929-2023年全球站点的逐日最低气温数据(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;其中又以气温指标最为常用&#xff01;说到气温数据&#xff0c;最详细的气温数据是具体到气象监测站点的气温数据&#xff01; 之前我们分享过1929-2023年全球气象站…...

2024美赛数学建模D题思路+模型+代码+论文(持续更新)

2024美赛数学建模A题B题C题D题E题F题思路模型代码论文&#xff1a;开赛后第一时间更新&#xff0c;获取见文末名片 组队环节&#xff1a; 美赛最多是3个人参赛&#xff0c;一般的队伍都是由三人组成&#xff08;当然如果你很大佬也可以一个人参赛&#xff09;&#xff0c;队伍…...

dubbo+sentinel最简集成实例

说明 在集成seata后&#xff0c;下面来集成sentinel进行服务链路追踪管理&#xff5e; 背景 sample-front网关服务已配置好 集成 一、启动sentinel.jar 1、官网下载 选择1:在本地启动 nohup java -Dserver.port8082 -Dcsp.sentinel.dashboard.serverlocalhost:8082 -Dp…...

9.2爬楼梯(LC70-E)

算法&#xff1a; 多举几个例子&#xff0c;找规律&#xff1a; 爬到第一层楼梯有一种方法&#xff0c;爬到二层楼梯有两种方法。 那么第一层楼梯再跨两步就到第三层 &#xff0c;第二层楼梯再跨一步就到第三层&#xff08;时序&#xff09;。 所以到第三层楼梯的状态可以由…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一&#xff1a;yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因&#xff0c;后面把yaml.safe_dump直接替换成yaml.dump&#xff0c;确实能保存&#xff0c;但出现乱码&#xff1a; 放弃yaml.dump&#xff0c;又切…...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...