vue3 数据可视化大屏 开发中,需要渲染高德地图实现轨迹回放。
我们可以通过Polyline来实现一条轨迹线,通过marker.moveAlong实现移动动画效果。
动态效果
演示地址
vue3 高德地图实现轨迹回放
引入高德地图
使用前需要引入高德
<scr...
yekong
10个月前 (03-13)
喜欢
vue项目开发中,在使用高德地图时,需要实现一个多轨迹回放效果,今天将实现效果以及演示地址整理出来。
动态效果
演示地址
vue高德地图多个轨迹回放
实例代码
getguiji() {
var that = this;
var title = '测试内容';
...
yekong
10个月前 (03-13)
喜欢
11 vue3 高德地图多个轨迹回放
实例代码:vue3高德地图多个轨迹回放
10 vue3 自定义图标点击放大地图显示子图标移入后显示弹窗
vue 高德地图显示一级数据的图标,鼠标移入一级图标,显示标题,单击一级图标放大地图,双击一级图标显示弹窗。
当一级图标放大后显示二级图...
yekong
10个月前 (03-13)
喜欢
vue3 数据可视化大屏 开发中,需要渲染高德地图,地图中覆盖物图标不能满足我们的需要,需要使用自定义html来实现我们想要的效果。
创建一个marker,并通过setContent来将我们的html代码插入到marker中,实现marker自定义html。
关键代码
addM...
yekong
2年前 (2023-04-20)
喜欢
vue3 数据可视化大屏 - 数据资产大屏 项目开发中,需要高德地图渲染热力图效果。我们可以通过AMap.Heatmap
初始化热力图,并且可以设置半径以及透明度。通过heatmap.setDataSet来设置热力图的坐标以及数值。
var heatmap = new AMap....
yekong
2年前 (2023-04-19)
喜欢
vue3 数据可视化大屏项目开发中,为了美观在渲染地图时,会给地图添加一个边框效果,今天整理的是高德地图边框效果实例。
实现方法
给地图添加一个div遮罩,通过css给这个遮罩添加一个内阴影效果。box-shadow: inset 0px 0px 32px 0px rgba(68...
yekong
2年前 (2023-04-18)
喜欢
vue3 数据可视化大屏项目开发中,需要点击地图获取经纬度,我们可以通过代码来实现想要的效果。
通过地图点击事件e.lnglat.getLng(), e.lnglat.getLat()两个方法分别获取经度和纬度。
演示实例
实现代码
<template>
<...
yekong
2年前 (2023-04-18)
喜欢
vue3 数据可视化大屏 开发中,有个要求,需要显示自定义图标,并且可以点击实现弹窗,可以通过筛选框来实现图标筛选。
演示实例
引入高德地图
<script type="text/javascript"
src="h...
yekong
2年前 (2023-04-18)
喜欢
vue3 数据可视化大屏 开发中,有个要求,地图要可以实现测距,搜索了一下高德地图支持这个功能,将实现方法记录一下。
演示实例
引入高德地图
<script type="text/javascript"
src="h...
yekong
2年前 (2023-04-18)
喜欢