整理vue3项目接入高德地图

最新推荐文章于 2024-08-21 16:17:14 发布
最新推荐文章于 2024-08-21 16:17:14 发布
阅读量454 收藏 11
点赞数 4
文章标签： arcgis javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45730399/article/details/141291783
版权

接入之前的准备工作：

可以在自己的项目中接入了：

  • 先安装依赖：

    • npm方式: npm i @amap/amap-jsapi-loader --save
    • yarn方式: yarn add @amap/amap-jsapi-loader --save

  • 引入下载的依赖包：import AMapLoader from '@amap/amap-jsapi-loader'

  • 在页面中想放地图的地方加 <div id="替换自己的id"></div>，并加上CSS宽高，不加页面会看不到

  • onMounted中初始化地图：这时在页面就可以看到简单地图了

    window._AMapSecurityConfig = {
  securityJsCode: '替换自己的安全密钥', // 安全密钥
}
// AMapLoader => 加载器 资源加载完成后就会触发 then
AMapLoader.load({
  key: '替换自己的key', // 申请好的Web端开发者Key，首次调用 load 时必填
  version: '2.0', // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  plugins: [
    // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    'AMap.ToolBar', // 缩放工具条
    'AMap.Scale', // 比例尺
    'AMap.Geolocation', //定位，提供了获取用户当前准确位置、所在城市的方法
    'AMap.Geocoder', // 坐标 -> 地址
    'AMap.ElasticMarker', // 灵活点标记
    'AMap.AutoComplete', // 输入提示
    'AMap.PlaceSearch', // 搜索
    'AMap.DistrictSearch', // 行政区查询服务
    'AMap.CitySearch', // 城市获取服务，获取用户所在城市
  ],
})
  .then((AMap) => {
    //设置地图容器id
    state.map = new AMap.Map('替换自己div的id', {
      zoom: 10, //初始化地图层级
      viewMode: '3D', //是否为3D地图模式
      scrollWheel: true, //鼠标滚轮放大缩小
      doubleClickZoom: true, //双击放大缩小
      keyboardEnable: true, //键盘控制放大缩小移动旋转
    })
    
    // 初始化插件
    // loadPlugin()
    
    // 可写其他逻辑
  })
  .catch(() => {
    Toast('地图加载失败')
  })

    在这里插入图片描述

  • 后面就可以利用高德提供的插件来定制化了，在初始化地图成功的回调里初始化插件，插件网址：https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins-list

    const loadPlugin = () => {
  /* 工具条插件 */
  AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
    //在回调函数中实例化插件，并使用插件功能
    const toolbar = new AMap.ToolBar() //创建工具条插件实例
    state.map.addControl(toolbar) //添加工具条插件到页面
    const scale = new AMap.Scale()
    state.map.addControl(scale)
  })

  /* 搜索 */
  AMap.plugin('AMap.PlaceSearch', function () {
    state.placeSearch = new AMap.PlaceSearch({
      map: state.map,
      autoFitView: false,
      showCover: true,
      pageIndex: state.pageIndex,
    })
  })

  /* 行政区搜索 */
  AMap.plugin('AMap.DistrictSearch', function () {
    if (!state.district) {
      state.district = new AMap.DistrictSearch({
        subdistrict: 3, //获取边界不需要返回下级行政区
        extensions: 'all', //返回行政区边界坐标组等具体信息
        level: 'district', //查询行政级别为 市
      })
    }
    state.district.setLevel('district')
  })

  /* 定位 */
  AMap.plugin('AMap.Geolocation', function () {
    state.geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, // 是否使用高精度定位，默认：true
      timeout: 10000, // 设置定位超时时间，默认：无穷大
      offset: [10, 20], // 定位按钮的停靠位置的偏移量
      zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      position: 'RB', //  定位按钮的排放位置,  RB表示右下
    })
  })

  /* 初始化marker */
  state.marker = new AMap.Marker()

  /* 使用到了根据经纬度获取地址 */
  AMap.plugin('AMap.Geocoder', function () {
    state.geocoder = new AMap.Geocoder()
  })
}

  • 在插件初始化完之后可以使用插件的方法进行定制化，整理用到的插件网址

全部代码如下：

<template>
  <div id="map"></div>
  <div>
    <div class="flex aic" style="background: #fff">
      <van-search
        id="search"
        v-model.trim="state.keyword"
        class="flex1"
        placeholder="请输入地址关键词"
        shape="round"
        show-action
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <div style="padding: 0 14px 0 4px; font-size: 14px" @click="sureClose">
        确定
      </div>
    </div>

    <div class="list">
      <van-list
        v-if="!state.empty"
        v-model:error="state.error"
        v-model:loading="state.loading"
        error-text="请求失败，点击重新加载"
        :finished="state.finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="nextPageSearch"
      >
        <template v-for="s in state.searchList" :key="s.id">
          <van-cell
            center
            :label="itemLabel(s)"
            style="--van-cell-line-height: 20px"
            :title="`${
              s.address === s.adname && s.adname !== s.name
                ? itemLabel(s)
                : s.name
            }`"
            @click="searchItemClick(s)"
          >
            <template #value>
              <img
                fit="contain"
                height="14"
                :src="
                  state.checkedId == s.id
                    ? require('@/assets/images/mine/checked.png')
                    : require('@/assets/images/mine/noCheck.png')
                "
                width="14"
              />
            </template>
          </van-cell>
        </template>
      </van-list>
      <van-empty
        v-if="state.empty"
        description="暂无数据"
        :image="require('@/assets/images/noData.png')"
        :image-size="[150, 126]"
      />
    </div>
  </div>
</template>

<script setup>
  import AMapLoader from '@amap/amap-jsapi-loader'
  import { Toast } from 'vant'

  const route = useRoute()
  const router = useRouter()
  const state = reactive({
    areaList: computed(() => getters['common/city']),
    loading: false,
    finished: false,
    error: false,
    empty: false,
    keyword: '', // 搜索值
    map: undefined,
    autocomplete: undefined,
    placeSearch: undefined,
    district: undefined,
    polygon: undefined,
    geolocation: undefined,
    marker: undefined,
    geocoder: undefined,
    pageIndex: 1,
    searchList: [],
    checkedId: '',
    selectItem: {},
  })

  const areaList = computed(() => {
    return JSON.parse(window.sessionStorage.getItem('city'))
  })

  const itemLabel = (s) => { // 搜索的数据名字会有重复的需要注意处理
    return `${s.pname === s.cityname ? s.pname : `${s.pname} ${s.cityname}`} ${
      s.name === s.adname ? '' : s.adname
    } ${s.address === s.adname ? '' : s.address}`
  }

  const sureClose = () => {
    // 数据可能和自己库的不一致，需要自己修改，我这里是修改了citycode
    const adcode = ['710000', '810000', '820000'].includes(
      state.selectItem.pcode
    )
      ? state.selectItem.pcode
      : state.selectItem.adcode
    const city = areaList.value.filter((f) => f.id == adcode)[0]
    window.sessionStorage.setItem(
      'gdAddress',
      JSON.stringify({
        ...state.selectItem,
        areaName: city.fullName,
        citycode: city.parentId,
      })
    )
    router.go(-1)
  }
  const onSearch = () => {
    if (!state.keyword) {
      return
    } else {
      clearPolygon()
      state.map.remove([state.marker])
      state.pageIndex = 1
      state.searchList = []
      nextPageSearch()
    }
  }

  const searchItemClick = (s) => {
    state.selectItem = s
    state.checkedId = s.id
    const city = areaList.value.filter(
      (f) => f.name == s.name || f.fullName == s.name
    )
    if (
      city.length !== 0 &&
      ['省', '市', '区', '县'].includes(
        s.name.substring(s.name.length - 1, s.name.length)
      )
    ) { // 进行行政区搜索
      districtSearch(s.adcode)
    } else {
      clearPolygon()
      state.map.setZoomAndCenter(12, [s.location.lng, s.location.lat])
      state.map.remove([state.marker])
      state.marker = new AMap.Marker({
        label: { content: s.name, direction: 'top' }, // 文本标注
        position: new AMap.LngLat(s.location.lng, s.location.lat),
      })
      state.map.add([state.marker])
    }
  }

  const loadPlugin = () => {
    /* 工具条插件 */
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
      //在回调函数中实例化插件，并使用插件功能
      const toolbar = new AMap.ToolBar() //创建工具条插件实例
      state.map.addControl(toolbar) //添加工具条插件到页面
      const scale = new AMap.Scale()
      state.map.addControl(scale)
    })

    /* 搜索 */
    AMap.plugin('AMap.PlaceSearch', function () {
      state.placeSearch = new AMap.PlaceSearch({
        map: state.map, // 会在地图标注
        autoFitView: false, // 地图是否显示能看到搜索结果的所有标注
        showCover: true,
        pageIndex: state.pageIndex,
      })
    })

    /* 行政区搜索 */
    AMap.plugin('AMap.DistrictSearch', function () {
      if (!state.district) {
        state.district = new AMap.DistrictSearch({
          subdistrict: 3, //获取边界不需要返回下级行政区
          extensions: 'all', //返回行政区边界坐标组等具体信息
          level: 'district', //查询行政级别为 市
        })
      }
      state.district.setLevel('district')
    })

    /* 浏览器定位 */
    AMap.plugin('AMap.Geolocation', function () {
      state.geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认：true
        timeout: 10000, // 设置定位超时时间，默认：无穷大
        offset: [10, 20], // 定位按钮的停靠位置的偏移量
        zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        position: 'RB', //  定位按钮的排放位置,  RB表示右下
      })
    })

    /* 初始化marker */
    state.marker = new AMap.Marker()
    
    /* 使用到根据经纬度获取地址 */
    AMap.plugin('AMap.Geocoder', function () {
      state.geocoder = new AMap.Geocoder()
    })
  }

  // 清除行政区polygon
  const clearPolygon = () => {
    if (state.polygon) {
      state.map.remove(state.polygon)
      state.polygon = null
    }
  }

  // 添加marker
  const addNewMarker = (lng, lat) => {
    state.map.remove([state.marker]) // 删除标记
    state.marker = new AMap.Marker({
      position: new AMap.LngLat(lng, lat),
    })
    state.map.add([state.marker]) // 添加标记
    state.marker.setPosition([lng, lat])

    lnglatAddress(lng, lat, () => {
      searchKerword()
    }) // 根据经纬度获取地址给marker添加label
  }

  const nextPageSearch = () => { // 滑到底部请求下一页
    AMap.plugin('AMap.PlaceSearch', function () {
      state.placeSearch = new AMap.PlaceSearch({
        map: state.map,
        autoFitView: false,
        pageIndex: state.pageIndex,
      })
    })
    searchKerword()
  }

  // 根据输入内容搜索
  const searchKerword = () => {
    state.placeSearch.search(state.keyword, (status, result) => {
      if (status == 'complete') {
        state.loading = false
        state.searchList =
          state.pageIndex === 1
            ? result.poiList.pois
            : [...state.searchList, ...result.poiList.pois]
        state.checkedId =
          state.searchList.length !== 0 && state.pageIndex === 1
            ? result.poiList.pois[0].id
            : state.checkedId
        if (result.poiList.count && state.searchList.length !== 0) {
          state.empty = false
          state.pageIndex === 1 && searchItemClick(result.poiList.pois[0])
          state.finished = result.poiList.pois.length < 10
          state.pageIndex += 1
        } else {
          state.empty = true
        }
      } else {
        state.finished = true
        state.loading = false
      }
    })
  }

  // 根据经纬度获取地址并建立带有label的maeker
  const lnglatAddress = (lng, lat, fn) => {
    state.geocoder.getAddress([lng, lat], (status, result) => {
      if (status === 'complete' && result.regeocode) {
        state.keyword = result.regeocode.formattedAddress
      } else {
        state.keyword = ''
        Toast('获取地址失败')
      }
      state.map.setZoomAndCenter(12, [lng, lat]) // 地图显示到标记地点
      // 添加地址标注
      state.map.remove([state.marker])
      state.marker = new AMap.Marker({
        label: { content: state.keyword, direction: 'top' }, // 文本标注
        position: new AMap.LngLat(lng, lat),
      })
      state.map.add([state.marker])
      fn && fn(result.regeocode)
    })
  }

  // 获取定位
  const getLocation = () => {
    state.geolocation.getCurrentPosition((status, result) => {
      if (status == 'complete') {
        addNewMarker(result.position.lng, result.position.lat)
      } else {
        Toast('获取定位失败')
      }
    })
  }

  // 行政区搜索
  const districtSearch = (code) => {
    state.map.remove([state.marker])
    state.district.search(code, function (status, result) {
      clearPolygon()
      const bounds = result.districtList[0].boundaries
      if (bounds) {
        // 生成行政区画polygon
        for (var i = 0; i < bounds.length; i += 1) {
          //构造MultiPolygon的path
          bounds[i] = [bounds[i]]
        }
        state.polygon = new AMap.Polygon({
          strokeWeight: 1,
          path: bounds,
          fillOpacity: 0.4,
          fillColor: '#80d8ff',
          strokeColor: '#0091ea',
        })
        state.polygon.on('click', () => {
          clearPolygon()
        })
        state.map.add(state.polygon) 
        state.map.setFitView(state.polygon) //视口自适应
      }
    })
  }

  // 初始化地图
  const initMap = () => {
    window._AMapSecurityConfig = {
      securityJsCode: '替换自己的安全密钥', // 安全密钥
    }
    // AMapLoader => 加载器 资源加载完成后就会触发 then
    AMapLoader.load({
      key: '替换自己的key', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
      plugins: [
        // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        'AMap.ToolBar', // 缩放工具条
        'AMap.Scale', // 比例尺
        'AMap.Geolocation', //定位，提供了获取用户当前准确位置、所在城市的方法
        'AMap.Geocoder', // 坐标 -> 地址
        'AMap.ElasticMarker', // 灵活点标记
        'AMap.AutoComplete', // 输入提示
        'AMap.PlaceSearch', // 搜索
        'AMap.DistrictSearch', // 行政区查询服务
        'AMap.CitySearch', // 城市获取服务，获取用户所在城市
      ],
    })
      .then((AMap) => {
        //设置地图容器id
        state.map = new AMap.Map('替换自己要显示地图元素的id', {
          zoom: 10, //初始化地图层级
          viewMode: '3D', //是否为3D地图模式
          scrollWheel: true, //鼠标滚轮放大缩小
          doubleClickZoom: true, //双击放大缩小
          keyboardEnable: true, //键盘控制放大缩小移动旋转
        })
        state.map.setDefaultCursor('pointer') // 地图小手

        // 初始化插件
        loadPlugin()

        /* 初始化时有keyword就进行行政区搜索根据keyword搜索，没有就获取定位并进行周边搜索 */
        if (state.keyword) {
          searchKerword()
        } else {
          getLocation()
        }
      })
      .catch(() => {
        Toast('地图加载失败')
      })
  }

  onMounted(() => {
    state.keyword = route.query.keyword
    initMap()
  })
</script>

<style lang="scss" scoped>
  #map {
    width: 100%;
    height: 60vh;
    background: #fff;
    transition: all 0.3s ease-in-out;
  }
  .list {
    height: calc(40vh - 56px);
    overflow: scroll;
    :deep(.van-cell--center) {
      justify-content: space-between;
      .van-cell__value {
        flex: none;
        margin-left: 4px;
      }
    }
  }
</style>

图示如下：
在这里插入图片描述

在这里插入图片描述

你会发光哎u
关注
vue项目引入高德地图
06-19
在vue项目中，添加高德地图。对开发地图的开发人员有一定帮助
vue3引入高德地图代码示例
04-27
内容概要：项目引入高德地图用vue3实现地图功能 适合人群：地图展示 能学到什么：高德地图的一些基础功能的实现。 阅读建议：基于高德地图开发的功能 建议搭配高德开放平台的api一起使用
vue3项目中引入高德地图
qq_43751614的博客
08-07 1854
vue3项目中引入高德地图
vue3项目引入高德地图详细方法教程
主题模板站的博客
01-10 4298
项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用，下面就来教大家如何使用。v=1.4.15&key=你的key,在高德控制台可以看到">3.在vue.config.js全局配置引入的高德地图cdn。在上图划红框里插入代码。
Vue3 + 高德地图
热门推荐
m0_68683769的博客
04-21 1万+
Vue3地图、Vue地图、Vue3 地图、Vue3 高德地图、vue 高德地图、vue 地图、高德地图、标记点、信息窗体、vue中使用高德地图、vue-amap、setup vue 高德地图、vue结合高德地图、vue中地图API的使用、vue3中高德地图
vue3接入高德地图
最新发布
oqqgZuo1的博客
08-21 2106
const map = new AMap.Map("container",{ //设置地图容器id。version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15。// plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等。center:[117.120000,36.650200], //初始化地图中心点位置。viewMode:"3D", //是否为3D地图模式。
在 vue3 中使用高德地图
weixin_64684095的博客
04-23 8010
自定义 Marker 内容可以是字符串拼接的 DOM 元素。可以根据 class 名去定义样式。//点标记显示内容`;如果不想使用 JS API 的结果面板，panel 可以缺省或者赋值 false，然后在 search()的回调中处理自己的逻辑，自定义搜索教程前往 输入提示与 POI 搜索。//在回调函数中使用插件功能placeSearch.search("北京大学", function (status, result) {//查询成功时，result 即对应匹配的 POI 信息})
vue3引入cdn使用
范天缘的博客
05-16 8078
背景:引入cdn直接调用提示undefined 原因:因为你没有在vue.confing注册，然后重新运行项目 正确做法： 1.public/index.html 里面的body里面引入cdn 2.在vue.config.js里面配置cdn module.exports = { configureWebpack: { externals: { AMap: 'AMap' } } } 3.在需要的vue文件里面调用 import AMap from 'AMap' 4
Web地图开发，在vue3中引入高德地图API
pipizhou16的博客
12-20 1404
Web地图开发，在vue3中引入高德地图API
Vue+Echarts监控大屏实例三：交通视频监控模板实例，监控大屏、模板
04-04
Vue+Echarts监控大屏实例三：交通视频监控模板实例，包括源码，开发...高德地图并展示对于报表，对菜单布局进行整理，添加了全屏切换及退出等相关功能。 使用HBuilderX开发，提供开发过程视频、相关文档、源码素材等。
微信小程序 | 基于高德地图+ChatGPT实现旅游规划小程序
陶人超有料的博客
04-26 7832
本项目前端基于vue+uniapp构建微信或者抖音小程序，后端基于Flask框架提供数据接口，同时结合了ChatGPT的旅游规划Prompts生成旅游攻略，最终使用高德地图的路径导航功能展示整个旅行的路线图，真正实现旅游攻略可视化！
记录下uniapp开发结合webview调用高德地图（路线规划，多路选择
m0_61331573的博客
04-07 1077
还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！【完整版领取方式在文末！！
自己写的。C语言。遍历。题解 | #字符串字符匹配#
2301_78234743的博客
04-19 896
问的很常规，基本都答出来了，希望有二面自我介绍，然后大约20分钟有关性格、未来规划等场景题参加过的比。从最早的提前批到现在，已经有7000+的春招企业了，还没有offer的大佬们可以捡漏了！二进宫了，base武汉，后台开发太卷了没想到还让我面了，但是问的太水了应该是KPI。#暑期实习# #阿里云#同一个岗位两个平台，投递的时候都没有上传简历 #亚信科技# #实习# #Java# #牛客帮帮团来啦。秋招一直在忙论文，佛系投了一些面了一些都因为准备不足寄了，十二月答辩完的时候就没啥了，后面过完年三月。
题解 | #从 Products 表中检索所有的产品名称
2301_79125642的博客
10-14 613
普通本科，中下游985，之前一直投的嵌入式软件，会c，武汉有哪些点就送的国企啊，目前投过烽火（差评太多不想面试），中原电子（面试挂了），东风（网申没理我），70。室友在亚信安全实习，想着早上跟他一起去，所以就报了第一个面，早上九点就到了，九点半一面，开始面的时候会议室就我和面试官，之后人多了有点影响的，面试官人挺好的，问。现进度如下:本地，6k，Java后端开发，①武汉华威科，背靠华科，产学研小公司，岗位是视觉算法，base武汉，n*13，公积金8%，公司基数缴纳，每个月也就几百块，技术说不咋加班，双休。
vue3结合使用高德地图
Rziziの博客
12-19 1911
【代码】vue3结合使用高德地图。
Vue3 可视化大屏引入高德地图，超详细，超简单，保姆级教程。
favourite23的博客
07-25 1243
1、 前往进行账号注册。如果手机上有高德地图App并且已经登录过，则可以直接选择登录2、注册/登录完成后来到 控制台-->应用管理-->我的应用-->点击创建新应用3、填写好应用名称和选择应用类型4、填写好后点击添加Key5、填写Key名称，选择Web端（JS API）勾选并同意协议6、完成以上步骤就会得到Key和安全密钥。注意保管。
vue3使用高德地图
LuoHuaX的博客
05-11 758
vue3使用高德地图
vue3地图（高德）
zybijiso666的博客
07-29 590
想要标记点的可以去入门指南找到添加点标记，自己根据里面的方法进行添加（这里就不演示了）3、在进阶教程里面找到js api 结合vue使用。2、在开发支持里面找到web端的地图 js api。创建地图（初始化是initMap()）1、先百度搜索高德地图api。5、新建一个地图项目 使用。在setup()里面声明。
vue3接入高德地图然如何实现
03-23
要实现 Vue3 接入高德地图，可以按照以下步骤进行： 1. 在 index.html 中引入高德地图的 JavaScript API： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> ``` 2. 在 Vue3 的组件中，使用 `mounted` 钩子函数初始化地图： ```javascript mounted() { // 创建地图实例 const map = new AMap.Map('map-container', { zoom: 10, center: [116.397428, 39.90923] }); // 添加插件 AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function() { map.addControl(new AMap.ToolBar()); map.addControl(new AMap.Scale()); }); } ``` 其中，`map-container` 是一个 div 元素的 id，用于显示地图。 3. 在组件的 template 中添加地图容器： ```html <template> <div id="map-container" style="height: 500px;"></div> </template> ``` 这样就可以在 Vue3 中接入高德地图了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值