注册页面，及map组件配置

shuishen

2022-02-19 da082a65300422f7ce3e5c6e5b612151044263a2

 pages/registerUser/registerUser.vue

@@ -7,7 +7,8 @@
         </u-form-item>
         <u-form-item label="角色" prop="role" left-icon="account-fill" label-width="200" :required="true">
            <u-input v-model="form.role" type="select" placeholder="请选择角色" :border="true" @click="depl" />
            <u-select v-model="show" mode="mutil-column-auto" :list="roleList" @confirm="radioGroupChange"></u-select>
            <u-select v-model="show" mode="mutil-column-auto" :list="roleList" @confirm="radioGroupChange">
            </u-select>
         </u-form-item>
         <u-form-item label="工作单位" prop="obj" left-icon="account-fill" label-width="200" :required="true"
            v-if="xqShow">
@@ -26,8 +27,17 @@
         </u-form-item>
      </u-form>

      <u-popup v-model="mapShow" mode="bottom" border-radius="14" height="60%" :closeable="true" open="getLocation">
         <map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="marker"
            :scale="scale" :polyline="polyline">
         </map>
      </u-popup>

      <u-button @click="mapShow = true">打开</u-button>

      <u-button class="submit" @click="zc">
         下一步</u-button>

      <!-- <u-button class="submit" @click="submit">提交</u-button> -->
   </view>
</template>
@@ -36,6 +46,28 @@
   export default {
      data() {
         return {
            mapShow: false,
            latitude: 28.68, //纬度
            longitude: 115.85, //经度
            scale: 12, //缩放级别
            polyline: [
               //    { //指定一系列坐标点，从数组第一项连线至最后一项
               //    points: [{
               //          latitude: 34.79977,
               //          longitude: 113.66072
               //       },
               //       {
               //          latitude: 34.795541,
               //          longitude: 113.681646
               //       },
               //    ],
               //    color: "#0000AA", //线的颜色
               //    width: 1, //线的宽度
               //    // 　　　　dottedLine:true,//是否虚线
               //    arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
               // },
            ],
            marker: [],
            show: false,
            showxq: false,
            xqShow: true,
@@ -222,19 +254,66 @@
            facebc: '#fff',
            faceco: '#000',
            faceMsg: '',
            roleList: [
               {label: '民警', value: 1417092295132561409},
               {label: '治保会队伍', value: 1424615693403414529},
               {label: '内保干部队伍', value: 1424615773594312705},
               {label: '治安巡防队伍', value: 1424615835435130881},
               {label: '信息员队伍', value: 1424615909959524354},
               {label: '保安员队伍', value: 1424615972718895106},
               {label: '警务辅助队伍', value: 1424616047083905026},
               {label: '平安志愿者', value: 1494565079268491266}
            roleList: [{
                  label: '民警',
                  value: 1417092295132561409
               },
               {
                  label: '治保会队伍',
                  value: 1424615693403414529
               },
               {
                  label: '内保干部队伍',
                  value: 1424615773594312705
               },
               {
                  label: '治安巡防队伍',
                  value: 1424615835435130881
               },
               {
                  label: '信息员队伍',
                  value: 1424615909959524354
               },
               {
                  label: '保安员队伍',
                  value: 1424615972718895106
               },
               {
                  label: '警务辅助队伍',
                  value: 1424616047083905026
               },
               {
                  label: '平安志愿者',
                  value: 1494565079268491266
               }
            ]
         };
      },
      methods: {
         getLocation() {
            uni.getLocation({
               type: 'wgs84',
               success: function(res) {
                  console.log('当前位置的经度：' + res.longitude);
                  console.log('当前位置的纬度：' + res.latitude);
                  that.latitude = res.latitude
                  that.longitude = res.longitude
                  that.marker = [
                     {
                        id: 0,
                        latitude: res.latitude, //纬度
                        longitude: res.longitude, //经度
                        iconPath: '/static/img/map/location.png', //显示的图标        
                        rotate: 0, // 旋转度数
                        width: 20, //宽
                        height: 20, //高
                        title: '位置', //标注点名
                        alpha: 1, //透明度
                     }
                  ]
               }
            })
         },
         zc() {
            var that = this;
            this.$refs.uForm.validate(valid => {
@@ -377,9 +456,9 @@
         // 选中任一radio时，由radio-group触发
         radioGroupChange(e) {

            this.form.role = e[0].label	
            this.form.role = e[0].label
            this.form.jsid = e[0].value
				

            this.show = false;
         }
      },