vue结合高德地图JS API2.0实现地图路线展示、轨迹纠偏、聚合点、聚合点点击以及弹窗、车辆移动

最新推荐文章于 2024-09-11 22:09:42 发布
最新推荐文章于 2024-09-11 22:09:42 发布
阅读量2.9k 收藏 11
点赞数 2
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43996368/article/details/131102501
版权

vue结合高德地图JS API2.0实现地图路线展示、轨迹纠偏、聚合点、聚合点点击以及弹窗、车辆移动

地图

<template>
  <div style="width: 100%; height: 100%">
    <div id="map-container"></div>
    <div style="display: none">
      <MarkerInfo
        :roadList="roadList"
        :infoContent="nowClusterType"
        ref="MarkerInfo"
      />
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, nextTick } from 'vue';
  import { loadAMap, mapStyle } from '@/utils/amap';
  import { highway } from '@/api';
  import coordtransform from 'coordtransform';
  import MarkerInfo from './MarkerInfo.vue';
  //import * as turf from '@turf/turf';
  export default defineComponent({
    name: 'Map',
    props: {
      roadRecord: {
        default: [],
      },
      sickList: {
        default: [],
      },
      sickId: {
        default: '',
        type: String,
      },
      roadList: {
        default: [],
      },
    },
    components: { MarkerInfo },
    setup(prop: any) {
      const map = ref<any>(null);
      const record = ref<any>({
        line: null,
        start: null,
        end: null,
        car: null,
      });
      const roadList = ref<any>([]);
      const fakeMarker = ref<any>(null);
      nextTick(() => {
        loadAMap()
          .then((AMap: any) => {
            AMap.plugin('AMap.MoveAnimation', () => {
              map.value = new AMap.Map('map-container', {
                mapStyle: mapStyle,
                resizeEnable: true,
                zoom: 12,
                rotateEnable: true,
                showLabel: true,
                pitchEnable: true,
              });
              //层级变换，清空窗体信息
              var logMapChange = function () {
                map.value.clearInfoWindow();
                if (fakeMarker.value) map.value.remove(fakeMarker.value);
              };
              map.value.on('zoomchange', logMapChange);
              map.value.on('click', logMapChange);
            });
          })
          .finally(() => {
            getRoad();
          });
      });
      const getRoad = () => {
        highway
          .getRouteLineInfo()
          .then((res: any) => {
            roadList.value = [];
            //轨迹纠偏插件引入
            window.AMap.plugin('AMap.GraspRoad', () => {
              var grasp = new window.AMap.GraspRoad();
              res.list.forEach((item: any) => {
                let path: any = [],
                  nowIndex: number = 0;
                //减少点的获取，高德只允许传参小于500个
                item.forEach((items: any, index: number) => {
                  if (
                    ((item.length < 5000 && index % 10 === 0) ||
                      (item.length >= 5000 && item.length < 10000 && index % 20 === 0) ||
                      (item.length >= 10000 && item.length < 50000 && index % 100 === 0) ||
                      (item.length >= 50000 && index % 200 === 0)) &&
                    path.length < 500
                  ) {
                    if (path.length === 0) {
                      path.push({
                        x: coordtransform.wgs84togcj02(items.longitude, items.latitude)[0],
                        y: coordtransform.wgs84togcj02(items.longitude, items.latitude)[1],
                        sp: items.speed,
                        ag: items.heading,
                        tm: items.gpsTime,
                      });
                    } else {
                      nowIndex++;
                      path.push({
                        x: coordtransform.wgs84togcj02(items.longitude, items.latitude)[0],
                        y: coordtransform.wgs84togcj02(items.longitude, items.latitude)[1],
                        sp: 10,
                        ag: 0,
                        tm: nowIndex,
                      });
                    }
                  }
                });
                //轨迹纠偏
                grasp.driving(path, (error: any, result: any) => {
                  if (!error) {
                    var path2 = [];
                    var newPath = result.data.points;
                    for (var i = 0; i < newPath.length; i += 1) {
                      path2.push([newPath[i].x, newPath[i].y]);
                    }
                    var newLine = new window.AMap.Polyline({
                      path: path2,
                      strokeWeight: 3,
                      strokeOpacity: 1,
                      strokeColor: '#00FF67',
                    });
                    roadList.value.push(newLine);
                    map.value.add(newLine);
                    map.value.setFitView(roadList.value);
                  }
                });
              });
            });
          })
          .finally(() => {
            setTimeout(() => {
              if (prop.sickList && prop.sickList.length > 0)
                setCluster();//添加JSAPI2.0下的聚合点
            }, 400);
          });
      };
      //清空地图
      const removeRecord = (needRemoveLine: boolean = true) => {
        map.value?.clearInfoWindow();
        if (fakeMarker.value) map.value.remove(fakeMarker.value);
        if (needRemoveLine) {
          roadList.value.forEach((item: any) => {
            if (item) map.value.remove(item);
          });
        }
        if (record.value.line) map.value.remove(record.value.line);
        if (record.value.start) map.value.remove(record.value.start);
        if (record.value.end) map.value.remove(record.value.end);
        if (cluster.value) cluster.value.setMap(null);
        if (record.value.car) {
          record.value.car.stopMove();
          map.value.remove(record.value.car);
        }
      };
      const nowClusterType = ref<any>([]);
      const cluster = ref<any>(null);
      const MarkerInfo = ref();
      //打开设备标记点窗体信息
      const clusterCallback = (e: any) => {
        nowClusterType.value = [];
        //判断点击的是聚合点
        if (e.clusterData.length > 0)
          e.clusterData.forEach((item: any) => {
            nowClusterType.value.push(item.info);
          });
        else nowClusterType.value.push(e.marker.info);
        var infoWindow: any = new window.AMap.InfoWindow({
          offset: new window.AMap.Pixel(0, nowClusterType.value.length > 1 ? -40 : -70),
          content: MarkerInfo.value.$el,
          anchor: 'bottom-center',
        });
        infoWindow.open(map.value, [e.lnglat.lng, e.lnglat.lat]);
        if (fakeMarker.value) map.value.remove(fakeMarker.value);
        if (nowClusterType.value.length === 1) {
          fakeMarker.value = new window.AMap.Marker({
            map: map.value,
            position: [e.lnglat.lng, e.lnglat.lat],
            offset: new window.AMap.Pixel(-16, -66),
            icon: new window.AMap.Icon({
              size: new window.AMap.Size(32, 74), // 图标尺寸
              image: require('../../../assets/images/map/alarm-yellow.png'), // Icon的图像
              imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
              imageSize: new window.AMap.Size(32, 74), // 根据所设置的大小拉伸或压缩图片
            }),
          });
        }
        //高德 InfoWindow解决2.0版本无法滚动问题
        infoWindow.on('mouseover', () => map.value.setStatus({ zoomEnable: false }));
        infoWindow.on('mouseout', () => {
          map.value.setStatus({ zoomEnable: true });
        });
        infoWindow.on('mousewheel', (e: any) => {
          const { originEvent } = e;
          let doc: any = document.querySelector('.marker-content');
          if (doc) doc.scrollTop -= originEvent.wheelDelta / 5;
        });
      };
      const setCluster = () => {
        map.value?.clearInfoWindow();
        if (cluster.value) cluster.value.setMap(null);
        if (!prop.sickList || prop.sickList.length === 0 || !window.AMap) return;
        let markerList: any = [];
        let allPath: any = [];
        roadList.value.forEach((items: any) => {
          allPath = allPath.concat(items._opts.path);
        });
        prop.sickList.forEach((item: any) => {
          /*let pointsList: any = []
          roadList.value[0].$x.forEach((items: any)=>{
            items.forEach((itemss: any)=>{
              pointsList.push(turf.point(itemss))
            })
          })
          let points: any = turf.featureCollection(pointsList);
          var targetPoint = turf.point([
            coordtransform.wgs84togcj02(item.lon, item.lat)[0],
            coordtransform.wgs84togcj02(item.lon, item.lat)[1],
          ]);*/
          // 计算path上距离pos最近的点
          markerList.push({
            info: item,
            lnglat: window.AMap.GeometryUtil.closestOnLine(
              coordtransform.wgs84togcj02(item.lon, item.lat),
              allPath
            ),
          });
        });
        var _renderMarker = function (context: any) {
          let icon = new window.AMap.Icon({
            size: new window.AMap.Size(32, 74), // 图标尺寸
            image: require('../../../assets/images/map/alarm-blue.png'), // Icon的图像
            imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new window.AMap.Size(32, 74), // 根据所设置的大小拉伸或压缩图片
          });
          context.marker.setOffset(new window.AMap.Pixel(-16, -66));
          context.marker.setIcon(icon);
          context.marker.info = context.data[0].info;
        };
        var _renderClusterMarker = function (context: any) {
          var factor = Math.pow(context.count / prop.sickList.length, 1 / 18);
          var div = document.createElement('div');
          var Hue = 180 - factor * 180;
          var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
          var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
          var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
          var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
          div.style.backgroundColor = bgColor;
          var size = Math.round(30 + Math.pow(context.count / prop.sickList.length, 1 / 5) * 20);
          div.style.width = div.style.height = size + 'px';
          div.style.border = 'solid 1px ' + borderColor;
          div.style.borderRadius = size / 2 + 'px';
          div.style.boxShadow = '0 0 5px ' + shadowColor;
          div.innerHTML = context.count;
          div.style.lineHeight = size + 'px';
          div.style.color = fontColor;
          div.style.fontSize = '14px';
          div.style.textAlign = 'center';
          context.marker.setOffset(new window.AMap.Pixel(-size / 2, -size / 2));
          context.marker.setContent(div);
        };
        cluster.value = new window.AMap.MarkerCluster(map.value, markerList, {
          gridSize: 80,
          averageCenter: false,
          renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
          renderMarker: _renderMarker, // 自定义非聚合点样式
        });
        cluster.value.on('click', clusterCallback);
        //map.value.setFitView();
      };
      watch(
        () => prop.sickList,
        () => {
          setCluster();
        }
      );
      watch(
        () => prop.sickId,
        () => {
          if (cluster.value && cluster.value.it.length > 0) {
            map.value.clearInfoWindow();
            if (fakeMarker.value) map.value.remove(fakeMarker.value);
            nowClusterType.value = [];
            cluster.value.it.forEach((item: any) => {
              if (item.info.id === prop.sickId) {
                nowClusterType.value.push(item.info);
                map.value.setCenter([item.lnglat.lng, item.lnglat.lat + 0.0002], true);
                map.value.setZoom(20, true);
                var infoWindow: any = new window.AMap.InfoWindow({
                  offset: new window.AMap.Pixel(0, -70),
                  content: MarkerInfo.value.$el,
                  anchor: 'bottom-center',
                });
                setTimeout(() => {
                  infoWindow.open(map.value, [item.lnglat.lng, item.lnglat.lat]);
                  fakeMarker.value = new window.AMap.Marker({
                    map: map.value,
                    position: [item.lnglat.lng, item.lnglat.lat],
                    offset: new window.AMap.Pixel(-16, -66),
                    icon: new window.AMap.Icon({
                      size: new window.AMap.Size(32, 74), // 图标尺寸
                      image: require('../../../assets/images/map/alarm-yellow.png'), // Icon的图像
                      imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
                      imageSize: new window.AMap.Size(32, 74), // 根据所设置的大小拉伸或压缩图片
                    }),
                  });
                }, 200);
              }
            });
          }
        }
      );
      watch(
        () => prop.roadRecord,
        () => {
          let path: any = [];
          removeRecord(false);
          if (prop.roadRecord.length === 0) return;
          prop.roadRecord.forEach((items: any) => {
            path.push([
              coordtransform.wgs84togcj02(items.longitude, items.latitude)[0],
              coordtransform.wgs84togcj02(items.longitude, items.latitude)[1],
            ]);
          });
          record.value.line = new window.AMap.Polyline({
            path: path,
            strokeColor: '#00F9FF',
            strokeOpacity: 1,
            strokeWeight: 3,
            strokeStyle: 'solid',
          });
          record.value.car = new window.AMap.Marker({
            map: map.value,
            position: path[0],
            offset: new window.AMap.Pixel(-14, -25),
            icon: new window.AMap.Icon({
              size: new window.AMap.Size(28, 50), // 图标尺寸
              image: require('../../../assets/images/map/car.png'), // Icon的图像
              imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
              imageSize: new window.AMap.Size(28, 50), // 根据所设置的大小拉伸或压缩图片
            }),
          });
          record.value.start = new window.AMap.Marker({
            map: map.value,
            position: path[0],
            offset: new window.AMap.Pixel(-16, -55),
            icon: new window.AMap.Icon({
              size: new window.AMap.Size(32, 55), // 图标尺寸
              image: require('../../../assets/images/map/start.png'), // Icon的图像
              imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
              imageSize: new window.AMap.Size(32, 55), // 根据所设置的大小拉伸或压缩图片
            }),
          });
          record.value.end = new window.AMap.Marker({
            map: map.value,
            position: path[path.length - 1],
            offset: new window.AMap.Pixel(-16, -55),
            icon: new window.AMap.Icon({
              size: new window.AMap.Size(32, 55), // 图标尺寸
              image: require('../../../assets/images/map/end.png'), // Icon的图像
              imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
              imageSize: new window.AMap.Size(32, 55), // 根据所设置的大小拉伸或压缩图片
            }),
          });
          record.value.start.dom.classList.add('marker-bottom');
          record.value.end.dom.classList.add('marker-bottom');

          record.value.car.moveAlong(path, {
            duration: 100, //可根据实际采集时间间隔设置
            autoRotation: true,
          });
          map.value.add(record.value.line);
          map.value.setFitView(record.value.line);
        },
        { deep: true }
      );
      return {
        nowClusterType,
        MarkerInfo,
      };
    },
  });
</script>

地图样式

<style scoped lang="less">
  #map-container {
    width: 100%;
    height: 100%;
    background-color: black;
    :deep(.amap-info-content) {
      padding: 0;
      background-color: transparent;
      box-shadow: none;
    }
    :deep(.amap-info-sharp) {
      border-top: 0 solid transparent;
      bottom: 20px;
    }
    :deep(.amap-layer) {
      background-color: black;
    }
    :deep(.amap-marker) {
	  &.marker-bottom {
	    &::after {
	      content: '';
	      position: absolute;
	      bottom: -9px;
	      left: 7px;
	      height: 18px;
	      width: 18px;
	      border-radius: 50%;
	      background: linear-gradient(180deg, #99f4f6, #00f9ff);
	      transform: rotateX(30deg);
	    }
	  }
	}
  }
</style>

地图加载方法

export function loadAMap() {
  return new Promise((resolve, reject) => {
    AMapLoader.load({
      key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        'AMap.ControlBar',
        'AMap.LineSearch',
        'AMap.StationSearch',
        'AMap.PolylineEditor',
        'AMap.PolygonEditor',
        'AMap.CircleEditor',
        'AMap.AutoComplete',
        'AMap.DistrictSearch',
        'AMap.PlaceSearch',
        'AMap.MouseTool',
        'AMap.moveAnimation',
        'AMap.MarkerCluster',
      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap: any) => {
        window.AMap = AMap;
        resolve(window.AMap);
      })
      .catch((e: any) => {
        console.log(e);
        reject();
      });
  });
}

车辆移动

let position: number[] = [
  coordtransform.wgs84togcj02(
    position_3d.lon,
    position_3d.lat
  )[0],
  coordtransform.wgs84togcj02(
    position_3d.lon,
    position_3d.lat
  )[1],
]；
const currentPosition = [
  obuMarker.value.getPosition().lng,
  obuMarker.value.getPosition().lat,
];
const currentDis = window.AMap.GeometryUtil.distance(currentPosition, position);
const currentMileage = 5;
if (currentDis >= currentMileage) {
  window.AMap.plugin(['AMap.MoveAnimation'], () => {
    obuMarker.value.moveTo(position, {
      duration: 1000,
      autoRotation: true,
    });
  });
}

展示

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

vue2/3 - 最新详细使用高德地图进行路线规划和详细途径路段信息，vue高德地图实现起点和终点路径高亮显示在地图上，并计算出整个路途公里数、预计到达时间、驾驶导航详细步骤信息（详细示例代码直接复制
高级前端工程师
05-11 3895
vue2，vue3，高德地图，vue高德地图，起点到终点，地图轨迹，路径规划，驾车轨迹图，利用高德地图实现车辆的路线规划，高德地图轨迹绘制，路段详细导航信息，vue实现高德地图路线规划功能，规划路线后如何获取途径的路段信息，途径数据，导航，导航详细数据，vue导航规划，导航路线规划绘制，导航规划后怎么获得途径的各路段，vue3使用高德地图，vue高德地图实现路线规划（含途经点），途径点详细数据，高德地图途径点怎么获取，行车路径规划 起始点+途经点，导航途径点数据用什么api，路线规划设置途经点，详细教程，高
高德地图 JS API 结合VUE 展示公交线路示例
keke11211的博客
05-09 1101
绘制一条线路效果图： 1. 安装： npm i @amap/amap-jsapi-loader --save 2. 代码： <template> <div class="amap-wrapper"> <div id="container" class="amap-box"></div> </div> </template> <script> import AMapLoader
基于vue-amap实现轨迹进度条和轨迹拖拽回放
weixin_43929450的博客
03-24 2708
采用定时器的方式，做出来的动画效果和高德自带的效果有一点点的差距，不过应该能接受，未使用高德的动画，是因为解决不了拖拽进度条以后，动画没有按照最新的轨迹来，还是按照老的轨迹行走，所以就想了别的方式，哪位大佬解决了这个问题，能否告诉我一声！！！
vue 高德地图打点，聚合点
ziyun_zeng的博客
03-28 708
安装：npm install @amap/amap-jsapi-loader。// 将 Marker 实例添加到 MarkerClusterer 中。map.setZoomAndCenter(层级，[经度，纬度])// 创建地图和 MarkerClusterer 实例。map.setCenter([经度, 纬度]);map.setCenter([经度，纬度])map.panTo([经度, 纬度]);map.panTo([经度，纬度])想要平滑过渡到中心点。
Vue接入高德地图并实现基本的路线规划功能
最新发布
黄团团的个人博客
09-11 959
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
vue中使用高德地图（JSAPI2.0示例）
04-28
参考高德地图官网的示例实现的。
vue实现高德地图点聚合
weixin_50379372的博客
06-07 2053
高德地图点聚合
Vue 高德地图点聚合
明耀的博客
02-21 1193
/ 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15。// 申请好的Web端开发者Key，首次调用 load 时必填。// 需要使用的的插件列表，如比例尺'AMap.Scale'等。// 海量点数据，数据中需包含经纬度信息字段 lnglat。//初始化地图中心点位置。//设置地图容器id。
vue 高德地图 （行经路线）
weixin_41618917的博客
05-25 1722
先放图 data(){ return{ driving = null routeLineList = [] } } getDispatchDetail() { // 清除老的行经路线 if (this.driving) { this.driving.clear() this.map.remove(this.routeLineList) // 因为我在创建的时候重置了线的样式， 也要删除routeLineList } this.loading
高德地图点聚合，点聚合点击事件，单点点击事件
06-06
在实际开发中，实现这些功能需要对JavaScript或相应的移动平台编程有扎实的理解，还需要熟悉高德地图的API文档。开发者需要编写代码来创建地图对象、设置点聚合规则、绑定点击事件、以及动态生成和更新信息窗体的...
vue使用高德地图点击下钻上浮效果的实现思路
10-16
根据提供的文件信息，以下是关于Vue使用高德地图实现点击下钻上浮效果的详细知识点。 首先，要了解Vue框架的基本使用和高德地图API的调用方式，理解它们如何结合来实现地图功能。Vue是一个用于构建用户界面的渐进式...
高德地图JSAPI结合Vue2使用
08-19
JSAPI结合Vue2示例安装包
在vue中高德地图引入和轨迹的绘制的实现
01-21
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） import VueAMap from...
高德地图轨迹回放（支持GPS纠错处理）
12-17
地图轨迹回放包含下面功能 1.轨迹回放播放 2.轨迹回放暂停 3.轨迹回放速度增大 4.轨迹回放速度减小 5.轨迹回放中文地址显示 6.支持进度条控制轨迹回放 7.支持对GPS原始数据的纠错处理 注：使用时替换相应地图key即可，提供Json模拟数据，保证运行
@vuemap/vue-amap，高德地图点聚合
m0_37653407的博客
01-11 706
@vuemap/vue-amap，高德地图点聚合
VUE引入高德地图实现驾车轨迹显示（简易版）
一些简单的分享
01-17 2988
当我们要进行车辆轨迹查看时，实际逻辑是传递了两个经纬度点位的数据，我们使用高德api自带的轨迹规划可以实现线路图的展示。1. 首先需要在高德地图注册对应的服务，注意绑定服务一定要是`web端`，如下图，我们会拥有对应的key值和安全密钥。，比如车辆轨迹的函数我们绑定在了div元素里，但是如果我们不进行特殊处理，只在methods里定义。需要注意的是，由于我们的初始化地图是写在methods方法里的，所以调用起来有一定的问题。我们每次进入或者切换车辆时，防止信息重叠展示，都是进行点位或者线路的清除。
高德地图-点聚合-点击事件（弹出窗口）-vue
m0_51551000的博客
02-26 2011
高德地图-点聚合-点击事件（弹出窗口）-vue
高德地图线路纠偏
lys19890129的专栏
10-19 598
公司有个物流项目，要求在网页端显示司机的运输轨迹，大概思路如下，每三秒钟发送一个定位，最后把位置信息以json格式保存到数据库，在网页中显示，现在需求如下，需要把保存的点位进行纠偏，轨迹集合删除相邻的相同定位的点，并进行纠偏，由于高德地图的纠偏接口一次只支持500个点位，并且有访问次数限制，于是进行批量纠偏操作，并把纠偏的结果保存到数据库，下次再打开网页时显示已经纠偏过的轨迹。
【vue2高德地图api】05-关于公交线路的案例实战
qq_51055690的博客
11-07 659
临时加了个功能，需要查询公交线路。类似下图，我会做的简单一点，本篇教程就不加下拉触底加载和上拉刷新了。只查询一遍，一次返回20条数据即可、顺便加一个搜索框官方文档入口提示：以下是本篇文章正文内容，下面案例可供参考如果没看过我之前的文章，可能对于初始化map中的会报错。这个在main.js中配置就好了安全密钥和mapJsKey都不能少建议从系列文章01开始看。
Vue使用高德地图展现行车轨迹
2301_76658376的博客
09-18 2604
高德地图vue展示车辆行车轨迹
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值