手机端抽屉式地图（百度地图）

百度地图 + vant，移动端样式，根据地图查看当前位置，以及表单提交。

<template>

  <div class="create_order">

    <nav-bar @clickLeft="showExit = true" :isShowCircle="true"></nav-bar>

    <div class="toplayout">

      <baidu-map

        id="map"

        :class="['map', {'map-height': currentHeight <= 50 }]"

        :scroll-wheel-zoom="true"

        :center="location"

        :zoom="zoom"

        @click="getLocation"

        @ready="handleMap"

      />

    </div>

    <div class="vertical-drawable" :style="heightStyle">

      <div class="title" ref="drawer">

        <van-divider class="slider_line" />

      </div>

      <div class="listview" @scroll.passive="onListScrolled($event)" ref="listView">

        <van-form ref="orderForm" name="order">

          <div class="pd_x-16">

            <p class="second_title">确认位置信息</p>

            <van-search

              class="location_search"

              name="searchContent"

              v-model="locationContent"

              placeholder="请输入您所在的位置"

              @focus="searchAddress"

            />

            <van-icon

              class="location_icon"

              :name="require('@/assets/images/icon/Shapelocation.svg')"

            />

            <span class="location_info">当前定位：{ { address }}</span>

          </div>

          <div class="pd_x-16 mt-24 service_type">

            <p class="second_title">选择救援服务</p>

            <van-radio-group

              name="serviceType"

              v-model="serviceType"

              @change="vServiceType"

            >

              <van-cell-group>

                <van-cell clickable @click="serviceType = '05'">

                  <template #title>

                    <van-icon

                      class="radio_icon"

                      :name="require('@/assets/images/icon/oil.svg')"

                    />

                    <span class="radio-title">送油</span>

                  </template>

                  <template #right-icon>

                    <van-radio name="05">

                      <template #icon="props">

                        <img

                          class="img-icon"

                          :src="props.checked ? activeIcon : inactiveIcon"

                        />

                      </template>

                    </van-radio>

                  </template>

                </van-cell>

                <van-cell clickable @click="serviceType = '04'">

                  <template #title>

                    <van-icon

                      class="radio_icon"

                      :name="require('@/assets/images/icon/electricity.svg')"

                    />

                    <span class="radio-title">搭电</span>

                  </template>

                  <template #right-icon>

                    <van-radio name="04">

                      <template #icon="props">

                        <img

                          class="img-icon"

                          :src="props.checked ? activeIcon : inactiveIcon"

                        />

                      </template>

                    </van-radio>

                  </template>

                </van-cell>

                <van-cell clickable @click="serviceType = '03'">

                  <template #title>

                    <van-icon

                      class="radio_icon"

                      :name="require('@/assets/images/icon/tire.svg')"

                    />

                    <span class="radio-title">换胎</span>

                  </template>

                  <template #right-icon>

                    <van-radio name="03">

                      <template #icon="props">

                        <img

                          class="img-icon"

                          :src="props.checked ? activeIcon : inactiveIcon"

                        />

                      </template>

                    </van-radio>

                  </template>

                </van-cell>

                <van-cell clickable @click="serviceType = '07'">

                  <template #title>

                    <van-icon

                      class="radio_icon"

                      :name="require('@/assets/images/icon/trailer.svg')"

                    />

                    <span class="radio-title">拖车</span>

                  </template>

                  <template #right-icon>

                    <van-radio name="07">

                      <template #icon="props">

                        <img

                          class="img-icon"

                          :src="props.checked ? activeIcon : inactiveIcon"

                        />

                      </template>

                    </van-radio>

                  </template>

                </van-cell>

                <van-cell clickable @click="serviceType = '22'">

                  <template #title>

                    <van-icon

                      class="radio_icon"

                      :name="require('@/assets/images/icon/warning.svg')"

                    />

                    <span class="radio-title">事故</span>

                  </template>

                  <template #right-icon>

                    <van-radio name="22">

                      <template #icon="props">

                        <img

                          class="img-icon"

                          :src="props.checked ? activeIcon : inactiveIcon"

                        />

                      </template>

                    </van-radio>

                  </template>

                </van-cell>

                <van-cell clickable @click="serviceType = '27'">

                  <template #title>

                    <van-icon

                      class="radio_icon"

                      :name="require('@/assets/images/icon/other.svg')"

                    />

                    <span class="radio-title">其他</span>

                  </template>

                  <template #right-icon>

                    <van-radio name="27">

                      <template #icon="props">

                        <img

                          class="img-icon"

                          :src="props.checked ? activeIcon : inactiveIcon"

                        />

                      </template>